SVG脚本编写示例和解释

使用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()函数用于更改属性的值。
微信公众号
手机浏览(小程序)
0
分享到:
没有账号? 忘记密码?