一篇文章带您完成SVGJavascript脚本编写

使用JavaScript，您可以编写SVG脚本。通过脚本，可以修改SVG元素，为它们设置动画，或者监听形状上的鼠标事件。当SVG嵌入HTML页面时，SVG元素可以在JavaScript中使用，SVG脚本可以用JavaScript编写。通过编写脚本，您可以修改SVG元素、为它们设置动画或侦听形状上的鼠标事件。当SVG嵌入到HTML页面中时，SVG元素可以在JavaScript中使用，就像它们是HTML元素一样。JavaScript看起来一样。1.SVGscriptexamplecase当按钮被点击时，改变SVG矩形的大小。运行效果：2.通过ID获取SVG元素的引用可以使用document.getElementById()函数获取SVG形状的引用。示例：varsvgElement=document.getElementById("rect1");此示例获取对ID为rect1的SVG元素的引用（该ID在SVG元素的id属性中指定）。1.改变属性值一旦你有一个SVG元素的引用，你就可以使用setAttribute()函数来改变它的属性。示例：varsvgElement=document.getElementById("rect1");svgElement.setAttribute("宽度","100");Resolution：设置选中的SVG元素的width属性。可以使用setAttribute()函数设置任何其他属性，包括样式属性。您还可以使用getAttribute()函数获取属性的值。示例：varsvgElement=document.getElementById("rect1");varwidth=svgElement.getAttribute("width");2.改变CSS属性通过SVG元素的style属性引用给定的CSS属性，可以改变SVG元素的CSS属性。下面是设置strokeCSS属性的示例：varsvgElement=document.getElementById("rect1");svgElement.style.stroke="#ff0000";注意：任何其他CSS属性也可以这样设置。只需将其名称放在svgElement.style上面的第二行之后。并将其设置为某个值。您还可以通过style属性读取CSS属性的值。示例：读取strokeCSS属性的值。varsvgElement=document.getElementById("rect1");varstroke=svgElement.style.stroke;解析：名称中带有破折号的CSS属性名称（例如stroke-width）需要通过['']构造来引用。这样做是因为带有破折号的属性名称在JavaScript中无效。因此你不能写。您必须改为编写element.style.stroke-width。element.style['stroke-width']，也可以在名称中使用破折号来引用CSS属性。3.事件监听器您可以根据需要直接在SVG中为SVG形状添加事件监听器。就像使用HTML元素一样。这是一个添加了onmouseover和onmouseout事件监听器的。示例：此示例会在鼠标位于矩形上方时更改描边颜色和描边宽度，并在鼠标离开矩形时重置描边颜色和描边宽度。您可以尝试下面的示例。尝试将鼠标移到形状上并再次移出以查看事件侦听器的效果。事件侦听器也可以使用addEventListener()函数附加到SVG元素。示例：varsvgElement=document.getElementById("rect1");svgElement.addEventListener("鼠标悬停",mouseOver);functionmouseOver(){alert("eventfired!");}此示例将名为MouseOver的事件侦听器函数添加到MouseOver事件。这意味着，只要用户将鼠标悬停在SVG元素上，就会调用事件侦听器函数。4.小结本文以SVG为基础，介绍javascript脚本在SVG中的应用。通过ID获取对SVG元素的引用，更改属性值，更改CSSS属性。通过项目详细讲解每个知识点。最后通过一个小项目，介绍一下事件监听器的应用。欢迎大家积极尝试。有时候看别人实现很简单，但是到了自己实现的时候，总会出现各种各样的问题。不要野心太大，努力理解得更深刻。