可以使用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>

函数changeDimensions(){document.getElementById(" rect1")。setAttribute(" width"，" 100"); }

尝试单击按钮以查看会发生什么。

通过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");

本示例设置选定的SVG元素的width属性。我们可以使用setAttribute()函数设置其他任何属性，包括style属性。

我们还可以使用getAttribute()函数获取属性的值。这是一个例子：

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

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

更改CSS属性

我们可以通过元素的style属性引用给定的CSS属性来更改SVG元素的CSS属性。这是设置strokeCSS属性的示例：

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

svgElement.style.stroke = "#ff0000";

我们也可以通过这种方式设置任何其他CSS属性。只需将其名称放在上面第二行的" svgElement.style。"部分之后，即可将value设置为某种值。

我们还可以通过style属性读取CSS属性的值。这是一个例子：

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

var stroke = svgElement.style.stroke;

本示例读取strokeCSS属性的值。

名称中包含破折号的CSS属性名称(例如stroke-width)需要通过["]构造进行引用。这样做是因为内部带有短划线的属性名称在JavaScript中无效。因此你不能写

element.style.stroke-width

相反，你必须写

element.style['stroke-width']

这样，我们还可以使用名称中的破折号来引用CSS属性。

事件监听器

我们可以根据需要直接在SVG中将事件侦听器添加到SVG形状中。就像使用HTML元素一样进行操作。这是添加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;"
        />

此示例在鼠标悬停在矩形上时更改笔触颜色和笔触宽度，并在鼠标离开矩形时重置笔触颜色和笔触宽度。我们可以尝试下面的示例。尝试将鼠标移到该形状上，然后再次移出该形状，以查看事件侦听器的效果。

我们还可以使用addEventListener()函数将事件侦听器添加到SVG元素。这是一个例子：

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

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

这个例子在mouseover事件中添加了一个名为mouseOver的事件监听器。这意味着，只要用户将鼠标悬停在SVG元素上，就会调用事件侦听器函数。

动画SVG形状

为了动画化SVG形状，我们需要重复调用JavaScript函数。该函数更改形状的位置或者尺寸。当重复调用该函数且间隔非常短时，形状的位置或者尺寸也会以很短的间隔更新，这使形状看起来很生动。

示例：

<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属性并将其转换为数字。然后2被添加到cx值。如果新的x值大于500，则将其重置为20。最后，将新的x值放回到 <circle>元素的cx属性中。圆因此移动到新的x位置。