通过 JavaScript 或 JQuery 操作 SVG 文件（对象）中的元素

Question

我在 html 代码中操作 SVG 文件（对象）时遇到了挑战。在 Snap、Raphael 中有解决方案，但我需要直接通过 JavaScript 或 JQuery 来完成。这就是我到目前为止所拥有的：

JS：

<object id="testSVG" data="image_library/grandstaff_drawing_only.svg"       
type="image/svg+xml" height=100% width=100%">
<img src="image_library/alto-clef.png" />
</object>

 <script>

window.onload=function() {
// Get the Object by ID
var a = document.getElementById("testSVG");
// Get the SVG document inside the Object tag
var svgDoc = a.contentDocument;
// Get one of the SVG items by ID;
var svgItem = svgDoc.getElementById("path3380");
// Set the colour to something else
//svgItem.setAttribute("stroke", "red");
svgItem.style.stroke = "#ff0000";
};

</script>

查询：

<object id="testSVG" data="image_library/grandstaff_drawing_only.svg"    
type="image/svg+xml" height=100% width=100%">
<img src="image_library/alto-clef.png" />
</object>


<script>

window.onload=function() {
var svgDoc = $(“#testSVG”)[0].contentDocument; 
$(“#path3380”, svgDoc).css(“stroke”, “red”); 

};

</script>

谢谢！！！

Answer 1

通常，当我想单独通过 javascript 创建或操作 SVG 图形时，我会使用 D3.js 库。http://d3js.org/

与像 Raphaeljs 这样的 polyfills 库不同，D3 提供了一个 javascript API，用于在浏览器中实时直接操作 SVG 元素。

D3 不是 SVG Polyfill： 与 Raphaël 不同，Raphaël 在不支持 SVG 的浏览器上为 SVG 提供 polyfill。D3 直接操作 SVG，没有任何抽象层。您的浏览器需要支持 SVG 才能使 D3 正常工作。（来源）

例如，这是我从 D3 教程制作的演示，该演示使用 Javascript 原生new Date()函数构建和操作 SVG 元素以创建实时 javascript / svg 驱动时钟：http : //jsfiddle.net/2jogwx6x/1/

D3.js 策略可能适用于您的目的，elem 选择方法类似于 jQuery 的 CSS 选择方法，但直接使用 dom 节点，但要使其工作，您需要将 SVG 数据直接嵌入到 DOM 中，例如：

<!-- simple rectangle - replace this with your real svg data -->
<svg width="400" height="110">
    <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)">
</svg>

而不是使用 <object id="testSVG" data="image_library/grandstaff_drawing_only.svg" type="image/svg+xml" height=100% width=100%">

要动态操作 DOM 中的 SVG 数据，它必须是 DOM 的一部分，而不是打开/写入/关闭外部文件。