相对于canvas绘图,SVG是一种绘制矢量图的技术。全称叫做Scalable Vector Graphics,可缩放的矢量图,在2000年就已经存在,H5把它纳入了标准标签库,并进行了一些瘦身。需要注意的是,SVG图形的属性不属于HTML DOM标准,需要用核心DOM的方法来操作;SVG的样式可以用css,但是只能用其专有的属性;如果要使用js动态生成SVG其中的元素,创建方法得用document.createElementNS('http://www.w3.org/2000/svg','标签名');SVG元素的nodeName都是纯小写形式。
一、使用方法
在HTML文件中直接使用SVG相关标签(<svg></svg>)即可,默认是一个300*150的inline-block。
二、绘制不同图形(部分)
1、绘制矩形
<rect [width/height/x/y/fill/fill-opacity/stroke/stroke-width/stroke-opacity]></rect>
2、绘制圆形
<circle [r/cx/cy]></circle>
3、绘制椭圆
<ellipse [rx/ry/cx/cy]></ellipse>
4、绘制直线
<line [x1/y1/x2/y2/stroke]></line>
5、绘制折线
<polyline [points/stroke]></polyline>
6、绘制多边形
<polygen [points]></polygen>
7、绘制文本
<text [x/y/font-size/alignment-baseline/fill]></text>
8、绘制图像
<image [width/height/xlink:href]></image>
9、特效对象——渐变特效
<defs>
<linearGradient [x1/y1/x2/y2]>
<stop [offset/stop-color]></stop>
</linearGradient>
</defs>
10、特效对象——高斯模糊滤镜
<defs>
<filter>
<feGaussionBlur [stdDeviation]>
</filter>
</defs>