javascript - 加载 SVG 后对其进行修改

标签 javascript jquery web svg

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

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

最佳答案

您无法“修改”SVG 文件(除非在服务器上更改它们)。 SVG 文件定义了 SVG 对象的集合,如果您愿意,可以使用 ID 来标识每个对象。这些对象可以像操作任何 DOM 元素一样使用 JavaScript 进行操作(例如 setAttribute 等)。检查http://www.w3.org/TR/SVG11/types.html#BasicDOMInterfaces对于 DOM 接口(interface)。请注意,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>

关于javascript - 加载 SVG 后对其进行修改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16799759/

相关文章:

javascript - 具有固定标题的可调整大小的列表

java - 如何单击加载到 JavaFX Webengine 的网站上的按钮

javascript - 如何在 jquery POST 中将 enctype 作为 multipart/form-data 发送

javascript - 一个应用程序的自定义 CSS 反射(reflect)在启动板内的每个应用程序中

javascript - 触发事件时隐藏/显示元素

javascript - 如何在 ng-include 中访问 ng-repeat 的 $parent

javascript - 绘制多条任意线是过于昂贵的 EaselJS

javascript - iPhone 上的滚动 iframe 不起作用

javascript - 如何让 React.js TypeScript 通过 onKeyDown 事件在 'parentElement' 上接受 'event.target' ?

c# - 如何编写自己的类似于 Visual Studio 2010 Web 性能测试的网页基准测试代码