分类：SVG

2021
01-14

Vue中引入svg图标的两种方式

Vue中引入svg图标的两种方式 Vue中引入svg图标的方式Vue中引入svg图标的方式一安装yarnaddsvg-sprite-loader--devsvg组件index.vue<!--svg组件--><template><svgclass="svg-icon":class="svgClass"aria-hidden="true"><use:xlink:href="iconName"/></svg></template><script>exportdefault{name:'SvgIcon',props:{//svg的名称svgName:{type:String,required:true}},computed:{iconName(){return`#icon-${this... 继续阅读 >
2020
10-18

JS页面动态绘图工具SVG，Canvas，VML介简介

说到绘图、报表之类的技术，大家首先想到的就是Flex，当然也有许多了解javaapplet，对于这两种技术来说，各有利弊。首先Flex很笨重，但是其效果实在让人喜欢。对于javaapplet来说，至少我在网络上很少看到，当然对于我们做开发的来说在我们的开发工具或者内部网络上还是有一些的。其实现在Web上进行绘图的话还是有很多选择的，你可以到谷歌上搜索JS绘图，会有很多绘图工具提供给你使用，而且功能非常强大。比如说maxGraph，你可以... 继续阅读 >
2020
10-09

vue项目里面引用svg文件并给svg里面的元素赋值

vue项目里面引用svg文件并给svg里面的元素赋值 前言项目里面用的svg图片比较复杂，还要对里面的元素赋值等等的。在HTML里面有试着用过svg，在vue里面还是第一次尝试。百度了很多要配置webpack.base.conf.js,还要封装组件什么的，但是没有用，那些方法应该是对icon的svg或者简单的svg图片有用吧。后面改变思路，想着能不能组件的形式引入svg文件。静态界面下看看能不能实现，然后在做动态赋值。折腾了一天，还是弄出来了。真不容易，看来svg这一块还是要好好学学的。话不多说，直... 继续阅读 >
2018
08-08

SVG 图像入门教程

SVG 图像入门教程 一、概述SVG是一种基于XML语法的图像格式，全称是可缩放矢量图（ScalableVectorGraphics）。其他图像格式都是基于像素处理的，SVG则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。SVG文件可以直接插入网页，成为DOM的一部分，然后用JavaScript和CSS进行操作。<!DOCTYPEhtml><html><head></head><body><svgid="mysvg"xmlns="http://www.w3.org/2000/sv... 继续阅读 >
2014
12-03

Snap.svg – 现代Web开发必备的JavaScript SVG 库

Snap.svg – 现代Web开发必备的JavaScript SVG 库 SVG是一种很好的Web技术方案，可以用来创建互动，在任何大小的屏幕上都会很好看、与分辨率无关的矢量图形。而这里推荐的Snap.svg这个 JavaScript可以让你像 jQuery操作DOM一样操作SVG资源。Snap.svg是专为现代浏览器打造，支持剪裁，遮罩，纹理，渐变，分组等功能。凭借丰富的动画库和易于的事件处理，Snap.svg可以帮助你轻松实现SVG功能。立即下载    效果演示... 继续阅读 >