32.SVG脚本

SVG脚本示例
通过ID引用SVG元素
改变属性值
改变CSS属性
事件监听器
为SVG形状添加动画

可以使用JavaScript为SVG添加脚本，通过脚本，你可以修改SVG元素，为它们添加动画，或者监听形状的鼠标事件。

当SVG嵌套在HTML页面中时，你可以使用JavaScript操作SVG元素，和操作HTML元素一样。JavaScript脚本看起来一样。

本文展示如何通过JavaScript处理SVG元素的示例，但不会解释JavaScript。要理解本文的示例，你需要对JavaScript已经有合理的了解。

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>
<input id="button1" type="button" value="Change Dimensions"
            onclick="changeDimensions()"/>

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

function changeDimensions() { document.getElementById("rect1").setAttribute("width", "100"); } 尝试点击按钮，看看会发生什么。 ## 通过ID引用SVG元素你可以使用`document.getElementById()`函数获取对SVG形状的引用。示例代码如下： ```js var svgElement = document.getElementById("rect1"); ``` 此例获取对ID为`rect1`（在SVG元素的`id`属性中指定的ID）的SVG元素的引用。 ## 改变属性值一旦获得对SVG元素的引用，就可以使用`setAttribute()`函数更改其属性。示例如下： ```js var svgElement = document.getElementById("rect1"); svgElement.setAttribute("width", "100"); ``` 这个例子设置所选的SVG元素的`width`属性。你可以使用`setAttribute()`函数设置其它任何属性，包括`style`属性。你还可以使用`getAttribute()`函数获取属性的值，示例代码如下： ```js var svgElement = document.getElementById("rect1"); var width = svgElement.getAttribute("width"); ``` ## 改变CSS属性你可以通过元素的`style`属性引用给定的CSS属性来更改SVG元素的CSS属性。下面例子设置了的CSS属性`stroke`： ```js var svgElement = document.getElementById("rect1"); svgElement.style.stroke = "#ff0000"; ``` 通过此方法，你可以设置任何其它CSS属性。只需将它的名字放在`svgElement.style`之后，并将其设置为某个值。通过`style`属性，你也可以获取到CSS属性的值，示例如下： ```js var svgElement = document.getElementById("rect1"); var stroke = svgElement.style.stroke; ``` 这个例子读取了CSS属性`stroke`的值。引用名称内包含短划线的CSS属性（如`stroke-width`），需要通过`['']`构造引用。这样做是因为带有短划线的属性名在JavaScript中是无效的，因此你不能这么写： ```js element.style.stroke-width ``` 但是你可以这样写： ```js element.style['stroke-width'] ``` 这样，你就可以引用名字中有短划线的CSS属性了。 ## 事件监听器如果需要，你可以直接在SVG中将事件监听器添加到SVG形状上，如同在HTML元素上一样。下面的例子添加了`onmouseover`和`onmouseout`事件监听器： ```xml ``` 此示例在鼠标悬停在矩形上方时，更改描边的颜色和宽度，并在鼠标离开矩形时，重置描边颜色和宽度。你可以尝试下面的例子。尝试将鼠标移动到形状上，然后再移出，以查看事件监听器的效果。

你也可以使用addEventListener()函数为SVG元素添加事件监听器。示例如下：

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


function mouseOver() {
    alert("event fired!");
}

这个例子为mouseover事件添加了一个名为mouseOver的事件监听函数。这意味着，无论用户何时将鼠标悬停在SVG元素上，都会调用事件监听函数。

为SVG形状添加动画

为了给SVG形状添加动画，你需要重复调用一个JavaScript函数。该函数改变形状的位置和尺寸。当函数被重复调用并且在它们之间的时间间隔非常短，形状将以非常短的间隔更新其位置和尺寸，这使得形状看起来像动画。

下面是一个SVG脚本动画示例，创建它的代码如下所示。单击SVG图像下面的两个按钮可启动和停止动画。

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);
}

</script>

```

两个HTML按钮都有一个onclick监听器。这些监听器调用开始和停止动画的startAnimation()和stopAnimation()函数。通过设置一个每20毫秒调用animate()函数的定时器来启动动画。再通过清除定时器来停止动画。

动画在animate()函数内部执行。首先，通过document.getElementById()函数获取对SVG图像中<circle>元素的引用。然后读取院的cx属性，并将其转换为数值。然后将cx加2。如果新的x值大于500，就将其重置为20。最后，将<circle>元素的cx属性设置为新的x值。该圆因此被移动到新的x位置。

上一页31.SVG动画下一页33.SVG变换

最后更新于4年前