在web前端使用SVG

前言：

花了些时间了解了一下svg，然而仍然不怎么了解...

第一步：直接在html代码中使用svg。

首先了解几个标签：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" ...>...</svg>

svg标签，需要声明namespace，是svg的根。

<defs>...</defs>

defs标签，在其中可以定义滤镜，填充等等。

<g>...</g>

g标签，一个svg标签可以包含一个或多个g标签，一个g标签可以包含一个或多个形状，g标签可以将多个形状分在一组，一同移动、变形等等。

<rect>, <circle>...

各种形状

首先就来画个矩形：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="400" height="400">

<g>

<rect x="-25" y="-25" rx="5" ry="5" width="50" height="50" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0);">

</g>

</svg>

样式的控制可以一起写在style属性里，也可以分开写比如：fill="rgb(0,0,255)" stroke=":rgb(0,0,0)" ...

然后改成用渐变色填充，渐变色就需要在defs标签里定义了：

<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>

然后在图形的fill属性使用这个渐变色：fill:url(#orange_red)

之后再加个滤镜，也定义在defs里：

<filter id="Gaussian_Blur">

    <feGaussianBlur in="SourceGraphic" stdDeviation="3" />

</filter>

同样的使用的时候：filter:url(#Gaussian_Blur)

然后再来看看动画：

动画要定义在图形里，用animateTransform标签

<rect ...>

<animateTransform attributeType="xml" attributeName="transform" type="rotate"
        from="0" to="360"
        begin="0" dur="5s"
        fill="freeze"
    />

</rect>

最后是事件：

事件可以用onclick="..."或者addEventListener的方法，除此之外还能用set标签，不过set标签与其说是定义事件，不如说是定义变化，只是这个变化需要一个事件来触发

<rect ...>

<set attributeName="fill" to="red" begin="click"/>

</rect>

用js操作svg：

创建svg，这里就需要用createElementNS这个api：

var SVGNS = 'http://www.w3.org/2000/svg';

var svg = document.createElementNS(SVGNS, 'svg');

var g = document.createElementNS(SVGNS, 'g');

var s = document.createElementNS(SVGNS, 'rect');

g.appendChild(s);

svg.appendChild(g);

document.body.appendChild(svg);

然后是事件，可以用addEventListener：

s.addEventListener('click', function () {
    s.setAttribute('fill', 'rgb(255,0,0)');
});

动画，也可以像操作其他元素的动画那样：

var rotate = function () {
    var t = (new Date() - rotate.t)
    angel = t / 10,
    px = 50 + Math.abs(100 - t / 20 % 200);

// rotate的中心是g的(0,0)点，所以这里把s的中心放到(0,0)点，然后通过g的transform来移动图形位置，这样就能让图形围绕它的中心旋转
    g.setAttribute('transform', 'translate('+px+',50)');
    s.setAttribute('transform', 'rotate('+angel+')');
    requestAnimationFrame(rotate);
}

小结：

大致了解了下创建svg，svg事件与动画的几种方式，不过想搞个复杂的滤镜就感觉很头疼，因为文档有点儿不好搞。要想玩好svg感觉还得多研究多事件，不是个容易的事儿 :)