SVG绘图

1.使用SVG绘制各种图形
通用属性：
fill="填充颜色"
stroke="描边颜色"
stroke-width="描边宽度"
style=" fill:''; stroke:'' "
opacity="透明度"
提示：可以把多个图形放在一个小组中，统一操作每个组员的样式

(1)矩形
<rect x="" y="" width="" height=""></rect>
(2)圆形
<circle cx="" cy="" r=""></circle>
document.createElementNS('', 'circle')
(3)椭圆
<ellipse cx="" cy="" rx="横向半径" ry="纵向半径"></ellipse>
(4)直线
<line x1="" y1="" x2="" y2="" stroke="线条颜色"></line>
(5)折线
<polyline points="x1,y1 x2,y2 x3,y3 ..." fill="transparent" stroke="线条颜色"></polyline>
(6)多边形
<polygon points="x1,y1 x2,y2 x3,y3 ..."></polygon>
(7)文字
<text x="" y="" font-size="20">文本内容</text>
提示：SVG中的文字直接出现在DOM树中，可以被搜索引擎的爬虫机器人检索到！
(8)图像
<image x="" y="" xlink:href=""></image>
提示：SVG中若绘制的了位图，无限缩放的特性就没有了！

2.为SVG图形图像添加特效——了解
所有的特效必须声明在<defs></defs>标签内，必须有ID，供某个图形/图像所引用。
(1)渐变色特效
<defs>
<linearGradient id="g1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="red"></stop>
<stop offset="100%" stop-color="green"></stop>
</linearGradient>
</defs>

<rect x="10" y="100" width="480" height="10" fill="url(#g1)"></rect>

(2)滤镜特效——高斯模糊
<defs>
<filter id="f5"> <!--定义滤镜元素-->
<feGaussianBlur stdDeviation="5"></feGaussianBlur>
</filter>
</defs>
<text x="0" y="100" font-size="100" filter="url(#f5)">达内科技</text>
提示：可以到http://www.w3school.com.cn/svg/svg_examples.asp查看更多的滤镜特效

转载于:https://www.cnblogs.com/wangdongdong1234/p/6394555.html