个性化阅读
专注于IT技术分析

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) 打赏
未经允许不得转载:srcmini » SVG脚本编写示例和解释
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏