在SVG加载之后修改它

Modifying SVG after it has been loaded

本文关键字：修改 之后 加载 SVG      更新时间：2023-09-26

如何在浏览器加载SVG文件后修改它，最好是通过jquery?一个简单的例子是按下按钮，SVG元素的颜色就会改变。任何文档也会有帮助。

编辑:这个链接帮助很大:w3.org/Graphics/SVG/IG/resources/svgprimer.html # SVG_in_HTML

您不能"修改"SVG文件(除非在服务器上更改它们)。SVG文件定义了SVG对象的集合，如果愿意，每个对象都可以用ID标识。这些对象可以像任何DOM元素(例如setAttribute等)一样被JavaScript操作。查看http://www.w3.org/TR/SVG11/types.html#BasicDOMInterfaces查看DOM接口。注意，SVGElement扩展了Element，这是基本的DOM元素类型。

编辑:简单的例子:

<html>
<body>
    <input type="button" onclick="doSVGThing()" value="change">
    <svg xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect id="aRect" x="10" y="10" height="100" width="100"
            style="stroke:#ff0000; fill: #9999ff"></rect>
</svg>
    <script type="text/javascript">
        function doSVGThing() {
            var r = document.getElementById('aRect');
            r.setAttribute('style', 'stroke: #00ff00; fill: #99ff99');
        }
    </script>
</body>
</html>
相关文章：