使用JavaScript，可以编写SVG脚本。通过脚本编写，您可以修改SVG元素，为其设置动画或侦听形状上的鼠标事件。当SVG嵌入HTML页面中时，可以在JavaScript中使用SVG元素。
可以使用JavaScript编写SVG脚本。通过编写脚本，您可以修改SVG元素，设置它们的动画，或者监听形状上的鼠标事件。
当SVG嵌入到HTML页面中时，可以在JavaScript中使用SVG元素，就像它们是HTML元素一样。JavaScript看起来是一样的。
本文向您展示了如何通过JavaScript处理SVG元素的示例，但并未解释JavaScript本身。要理解本文中的示例，您需要已经对JavaScript有一定的了解。
这是一个简单的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>测试看看?/?尝试单击按钮以查看会发生什么。
您可以使用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");通过SVG元素的style属性引用给定的CSS属性，可以更改SVG元素的CSS属性。下面是一个设置stroke CSS属性的示例：
var svgElement = document.getElementById("rect1");
svgElement.style.stroke = "#ff0000";您也可以通过这种方式设置任何其他CSS属性。只需将其名称放在svgElement.style. 上面第二行的后面，然后将其设置为某种值即可。
您还可以通过style属性读取CSS属性的值。这是一个示例：
var svgElement = document.getElementById("rect1");
var stroke = svgElement.style.stroke;本示例读取stroke CSS属性的值。
名称中包含短划线的CSS属性名称（例如stroke-width）需要通过['']构造进行引用。这样做是因为带有短划线的属性名称在JavaScript中无效。因此你不能写
element.style.stroke-width
相反，你必须写
element.style['stroke-width']
这样，您还可以使用名称中的破折号来引用CSS属性。
您可以根据需要直接在SVG中将事件监听器添加到SVG形状中。就像使用HTML元素一样进行操作。这是一个添加onmouseover 和 onmouseout事件监听器的示例：
<svg width="500" height="100"> <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("event fired!");
}此示例将名为MouseOver的事件监听器函数添加到MouseOver事件。 这意味着，只要用户将鼠标悬停在SVG元素上，就会调用事件监听器函数。
为了使SVG形状具有动画效果，您需要重复调用JavaScript函数。 该函数用于更改形状的位置或尺寸。 当函数被重复调用并且间隔非常短时，形状的位置或尺寸也将以非常短的间隔更新，这会使形状看起来像动画一样。
这是SVG脚本动画示例。示例下面显示了创建它的代码。单击SVG图像下方的两个按钮以开始和停止动画。
这是生成上述动画所需的代码：
<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="开始动画" onclick="startAnimation();">
<input type="button" value="停止动画" onclick="stopAnimation();">测试看看?/?这两个HTML按钮都附加了一个onclick监听器。 这些监听器调用startAnimation()和stopAnimation()函数，用于启动和停止动画。 动画通过设置计时器开始，该计时器每隔20毫秒调用Animate()函数。 再次清除此计时器功能可停止动画。
动画在animate()函数内部执行。 首先，该函数通过document.getElementById()函数获得对SVG图像中<circle>元素的引用。 然后，读取圆的cx属性并将其转换为数字。 然后将2加到cx值。 如果新的x值大于500，则将其重置为20。最后，将新的x值放回到<circle>元素的cx属性中。 圆因此移动到新的x位置。