svg基础语法

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

       <svg width="300" height="400" version="1.1"
        xmlns="http://www.w3.org/2000/svg">
            <rect x="20" y="20" width="250" height="250" rx="50%" rx="50%"
            style="fill:purple;stroke:pink;stroke-width:5;opacity: .5;"/>
       </svg>

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

svg绘制圆形

<svg width="300" height="400" version="1.1"
xmlns="http://www.w3.org/2000/svg">
    <circle cx="100" cy="50" r="40" stroke="black"
    stroke-width="2" fill="red"/>
</svg>

svg绘制椭圆

    <svg width="800" height="400" version="1.1"
    xmlns="http://www.w3.org/2000/svg">
        <ellipse cx="240" cy="100" rx="220" ry="30"
        style="fill:purple"/>

        <ellipse cx="220" cy="70" rx="190" ry="20"
        style="fill:lime"/>

        <ellipse cx="210" cy="45" rx="170" ry="15"
        style="fill:yellow"/>
    </svg>

svg绘制线条

    <svg width="800" height="400" version="1.1"
    xmlns="http://www.w3.org/2000/svg">
        <line x1="0" y1="0" x2="300" y2="300"
        style="stroke:rgb(99,99,99);stroke-width:2"/>
    </svg>

svg绘制多边形

    <svg width="800" height="400" version="1.1"
    xmlns="http://www.w3.org/2000/svg">
        <polygon points="220,100 300,210 170,250 123,234"
        style="fill:#cccccc;
        stroke:#000000;stroke-width:1"/>
    </svg>

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

    <svg width="800" height="400" version="1.1"
    xmlns="http://www.w3.org/2000/svg">
        <polyline points="0,0 0,20 20,20 20,40 40,40 40,60"
        style="fill:white;stroke:red;stroke-width:2"/>
    </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 width="800" height="400" version="1.1"
    xmlns="http://www.w3.org/2000/svg">
        <path d="M153 334
        C153 334 151 334 151 334
        C151 339 153 344 156 344
        C164 344 171 339 171 334
        C171 322 164 314 156 314
        C142 314 131 322 131 334
        C131 350 142 364 156 364
        C175 364 191 350 191 334
        C191 311 175 294 156 294
        C131 294 111 311 111 334
        C111 361 131 384 156 384
        C186 384 211 361 211 334
        C211 300 186 274 156 274"
        style="fill:white;stroke:red;stroke-width:2"/>
    </svg>

svg滤镜

    <svg width="800" height="400" version="1.1"
    xmlns="http://www.w3.org/2000/svg">
        <defs>
        <filter id="Gaussian_Blur">
        <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
        </filter>
        </defs>

        <ellipse cx="200" cy="150" rx="70" ry="40"
        style="fill:#ff0000;stroke:#000000;
        stroke-width:2;filter:url(#Gaussian_Blur)"/>
    </svg>

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

修改模糊程度demo:

        <defs>
          <filter id="Gaussian_Blur">
            <feGaussianBlur in="SourceGraphic" stdDeviation="20"/>
          </filter>
        </defs>

        <ellipse cx="200" cy="150" rx="70" ry="40"
        style="fill:#ff0000;stroke:#000000;
        stroke-width:2;filter:url(#Gaussian_Blur)"/>

svg绘制线性渐变

        <defs>
        <linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" style="stop-color:rgb(255,255,0);
        stop-opacity:1"/>
        <stop offset="100%" style="stop-color:rgb(255,0,0);
        stop-opacity:1"/>
        </linearGradient>
        </defs>

        <ellipse cx="200" cy="190" rx="85" ry="55"
        style="fill:url(#orange_red)"/>

svg绘制放射渐变

    <svg width="800" height="400" version="1.1"
    xmlns="http://www.w3.org/2000/svg">
        <defs>
        <radialGradient id="grey_blue" cx="50%" cy="50%" r="50%"
        fx="50%" fy="50%">
        <stop offset="0%" style="stop-color:rgb(200,200,200);
        stop-opacity:0"/>
        <stop offset="100%" style="stop-color:rgb(0,0,255);
        stop-opacity:1"/>
        </radialGradient>
        </defs>

        <ellipse cx="230" cy="200" rx="110" ry="100"
        style="fill:url(#grey_blue)"/>
    </svg>