当前位置主页 > 资料库 > 前端教程 > SVG进阶 | SVG和Javascript脚本

SVG进阶 | SVG和Javascript脚本

06-29

我们可以通过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矩形添加了onmouseoveronmouseout的事件监听。

<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的动画,可以制作出非常炫酷的效果。

返回SVG教程目录
相关阅读
Previous:
上一篇:SVG进阶 | SVG路径动画-SMIL
Next:
下一篇:SVG进阶 | SVG渐变(SVG Gradients)
返回顶部