使用JavaScript, 可以编写SVG脚本。通过脚本编写, 你可以修改SVG元素, 对其进行动画处理或侦听形状上的鼠标事件。
当SVG嵌入HTML页面中时, 可以在JavaScript中使用SVG元素。
例：
<!DOCTYPE html>
<html>
<body>
<svg width="500" height="150">
<rect id="rect1" x="20" y="20" width="70" height="80"
style="stroke: black; stroke-width: 2; fill:purple; fill-opacity: .5;"/>
</svg>
<input id="button1" type="button" value="Change Dimensions"
onclick="changeDimensions()"/>
<script>
function changeDimensions() {
document.getElementById("rect1").setAttribute("width", "120");
document.getElementById("rect1").setAttribute("height", "100");
}
</script>
</body>
</html>立即测试
解释
- 使用document.getElementById()函数, 可以获得对SVG形状的引用。
- setAttribute()函数用于更改属性的值。
