svg基础语法

svg绘制带有圆角及透明度的矩形

通过opacity可以给整个svg图形添加透明度。当然，也可以使用fill-opacity以及strike-opacity分别定制stroke和fill的透明度。通过rx以及ry可以指定圆角的大小。设置为50%刚好为圆形。

svg绘制圆形

svg绘制椭圆

svg绘制线条

svg绘制多边形

svg绘制折线，用来创建仅包含直线的形状

注意绘制折线与绘制多边形的区别：折线的首尾不相连，而多边形绘制会首尾相连

svg绘制路径path

绘制路径path常用参数如下：
M = moveto
Z = closepath
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc

举个例子：

svg滤镜

标签的 id 属性可为滤镜定义一个唯一的名称（同一滤镜可被文档中的多个元素使用）
filter:url 属性用来把元素链接到滤镜。当链接滤镜 id 时，必须使用 # 字符
滤镜效果是通过 标签进行定义的。fe 后缀可用于所有的滤镜
标签的 stdDeviation 属性可定义模糊的程度
in="SourceGraphic" 这个部分定义了由整个图像创建效果

修改模糊程度demo:

svg绘制线性渐变

svg绘制放射渐变