Front End

Appearance

SVG脚本 ​

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

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

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

SVG脚本示例 ​

这里有一个简单的SVG脚本示例，它会在单击按钮时更改SVG矩形的尺寸。

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

尝试点击按钮，看看会发生什么。

通过ID引用SVG元素 ​

你可以使用document.getElementById()函数获取对SVG形状的引用。示例代码如下：

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

此例获取对ID为rect1（在SVG元素的id属性中指定的ID）的SVG元素的引用。

改变属性值 ​

一旦获得对SVG元素的引用，就可以使用setAttribute()函数更改其属性。示例如下：

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

svgElement.setAttribute("width", "100");
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");
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";
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;
var svgElement = document.getElementById("rect1");

var stroke = svgElement.style.stroke;

这个例子读取了CSS属性stroke的值。

引用名称内包含短划线的CSS属性（如stroke-width），需要通过['']构造引用。这样做是因为带有短划线的属性名在JavaScript中是无效的，因此你不能这么写：

js
element.style.stroke-width
element.style.stroke-width

但是你可以这样写：

js
element.style['stroke-width']
element.style['stroke-width']

这样，你就可以引用名字中有短划线的CSS属性了。

事件监听器 ​

如果需要，你可以直接在SVG中将事件监听器添加到SVG形状上，如同在HTML元素上一样。下面的例子添加了onmouseover和onmouseout事件监听器：

xml
<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;"
        />
<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;"
        />

此示例在鼠标悬停在矩形上方时，更改描边的颜色和宽度，并在鼠标离开矩形时，重置描边颜色和宽度。你可以尝试下面的例子。尝试将鼠标移动到形状上，然后再移出，以查看事件监听器的效果。

xml
<svg width="500" height="100">
    <rect x="10" y="10" width="100" height="75" 
    style="stroke: rgb(0, 0, 0); fill: rgb(238, 238, 238); stroke-width: 1;" 
    onmouseover="this.style.stroke = '#ff0000'; this.style['stroke-width'] = 5;" 
    onmouseout="this.style.stroke = '#000000'; this.style['stroke-width'] = 1;" />
</svg>
<svg width="500" height="100">
    <rect x="10" y="10" width="100" height="75" 
    style="stroke: rgb(0, 0, 0); fill: rgb(238, 238, 238); stroke-width: 1;" 
    onmouseover="this.style.stroke = '#ff0000'; this.style['stroke-width'] = 5;" 
    onmouseout="this.style.stroke = '#000000'; this.style['stroke-width'] = 1;" />
</svg>

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

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

function mouseOver() {
    alert("event fired!");
}
var svgElement = document.getElementById("rect1");
svgElement.addEventListener("mouseover", mouseOver);

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

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

为SVG形状添加动画 ​

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

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

xml
<script>
    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>
<br>
<input type="button" value="Start Animation" onclick="startAnimation();">
<input type="button" value="Stop Animation" onclick="stopAnimation();">
<br>
<script>
    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>
<br>
<input type="button" value="Start Animation" onclick="startAnimation();">
<input type="button" value="Stop Animation" onclick="stopAnimation();">
<br>

这里是生成上面动画所需的代码：

html
<svg width="500" height="100">
    <circle id="circle1" cx="20" cy="20" r="10"
            style="stroke: none; fill: #ff0000;"/>
</svg>

<script>
    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>
<br>
<input type="button" value="Start Animation" onclick="startAnimation();">
<input type="button" value="Stop Animation" onclick="stopAnimation();">
<svg width="500" height="100">
    <circle id="circle1" cx="20" cy="20" r="10"
            style="stroke: none; fill: #ff0000;"/>
</svg>

<script>
    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>
<br>
<input type="button" value="Start Animation" onclick="startAnimation();">
<input type="button" value="Stop Animation" onclick="stopAnimation();">

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

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