SVG脚本编写示例和解释

【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="http://www.srcmini.com/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()函数用于更改属性的值。

    推荐阅读