SVG进阶 | SVG和Javascript脚本

06-29 次

标签 svg html5 svg

我们可以通过javascript来修改SVG元素，使它产生动画效果，或者在SVG图像上监听鼠标事件等等。

当SVG嵌入到HTML页面的时候，你可以使用javascript来操作SVG元素，就像操作其他HTML元素一样。

SVG脚本的例子

下面是一个简单的SVG脚本的例子，它在按钮被点击的时候，动态修改SVG矩形的尺寸。

<svg width="500" height="100">
    <rect id="rect1" x="10" y="10" width="50" height="80"
          style="stroke:#000000; fill:none;"/>
</svg>
<button id="button1" type="button" class="btn btn-primary" 
          onclick="changeDimensions()"> 修改SVG矩形的尺寸</button>

<script>
    function changeDimensions() {
        document.getElementById("rect1").setAttribute("width", "100");
    }
</script>

点击上面的按钮查看效果。

通过ID获取SVG的引用

我们可以使用document.getElementById()函数来获取一个SVG元素的引用。

var svgElement = document.getElementById("rect1");

这个例子获取ID为rect1的SVG图形的引用，ID是SVG图形中的id属性。

修改属性值

在你获取了一个SVG元素的引用之后，你就可以使用setAttribute()函数来修改它的属性值。例如：

var svgElement = document.getElementById("rect1");

svgElement.setAttribute("width", "100");

这个例子设置ID为rect1的SVG矩形的width属性。同样，你可以使用setAttribute()来设置其它SVG属性，包括style中的属性。

你还可以使用getAttribute()函数来获取一个属性值。例如：

var svgElement = document.getElementById("rect1");

var width = svgElement.getAttribute("width");

修改CSS属性

我们可以通过SVG元素的style属性来修改它的CSS样式。例如：

var svgElement = document.getElementById("rect1");

svgElement.style.stroke = "#ff0000";

同样你可以通过这个方法来设置任何CSS属性。

你还可以通过style属性来获取某个CSS属性的值。例如下面的例子获取SVG元素的描边属性的值：

var svgElement = document.getElementById("rect1");

var stroke = svgElement.style.stroke;

要注意的是，在某些SVG的CSS属性中，属性名称带有-连接符，例如stroke-width。这时候我们就需要通过['']结构来引用它。这是因为带连接符的CSS属性名称在javascript中是无效的。你不能写成下面的样子：

element.style.stroke-width

你需要像下面这样来书写代码：

element.style['stroke-width']

事件监听

你可以直接在SVG元素上添加js事件监听。这种操作和HTML元素是一样的。下面的代码中，为一个SVG矩形添加了onmouseover和onmouseout的事件监听。

<rect x="10" y="10" width="100" height="75"
      style="stroke: #000000; fill: #eeeeee;"
      onmouseover="this.style.stroke = '#ff0000'; this.style['stroke-width'] = 5;"
      onmouseout="this.style.stroke = '#000000'; this.style['stroke-width'] = 1;"
/>

这个例子在鼠标滑过SVG矩形时修改它的描边颜色和描边宽度，并在鼠标离开矩形是将描边颜色和描边宽度复位。下面是上面代码的返回结果，你可以用鼠标放上去试试。

你还可以使用addEventListener()函数来为SVG元素附加事件监听。

var svgElement = document.getElementById("rect1");
svgElement.addEventListener("mouseover", mouseOver);

function mouseOver() {
    alert("事件被触发!");
}

这个例子为SVG元素添加了一个名称为mouseOver的js mouseover事件。当用户用鼠标滑过这个元素的时候，事件将被触发。

驱动SVG图形动画

为了使用js来驱动SVG图形动画，你需要重复的调用javascript函数。这个函数用于改变图形的大小和尺寸。当我们使用极小的时间来改变图形的位置和尺寸的时候，图形看起来就像是在动画一样。

下面是一个简单的例子。有两个按钮，一个用于使SVG圆形水平无限循环的移动，一个用于暂停移动。

上面例子的代码如下：

<svg width="500" height="100">
    <circle id="circle1" cx="20" cy="20" r="10"
            style="stroke: none; fill: #ff0000;"/>
</svg>   
<button type="button" class="btn btn-primary" onclick="startAnimation()"> 开始动画</button>
<button type="button" class="btn btn-success" onclick="stopAnimation()"> 暂停动画</button>

var timerFunction = null;
function startAnimation() {
    if(timerFunction == null) {
        timerFunction = setInterval(animate, 20);
    }
}

function stopAnimation() {
    if(timerFunction != null){
        clearInterval(timerFunction);
        timerFunction = null;
    }
}

function animate() {
    var circle = document.getElementById("circle1");
    var x = circle.getAttribute("cx");
    var newX = 2 + parseInt(x);
    if(newX > 500) {
        newX = 20;
    }
    circle.setAttribute("cx", newX);
}

两个<button>按钮上分别使用onclick事件监听。这些事件监听分别调用startAnimation()和stopAnimation()函数来开始和暂停圆形的动画。圆形的动画是通过一个定时器每隔20毫秒调用一次animate()函数来实现的。动画的暂停通过清除定时器来实现。

在animate()函数中，首先通过document.getElementById()函数来获取<circle>元素的引用。然后获取圆形的cx属性的值。接着将这个值转换为整数，并加上2个单位，意思是向右移动2个单位。接着判断新的位置是否大于500个单位，如果大于则将位置重置回20个单位的地方。这样，通过定时器的调用，实现了圆形不断来回重复动画的效果。

要想使用js来更好的控制SVG图形，建议使用一些优秀的js库插件，如Snap.svg。这些js库提供大量的方法来控制SVG的动画，可以制作出非常炫酷的效果。