通过 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>

jQuery：

<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 之类的 lib 不同，D3 提供了一个 javascript API，用于在浏览器中实时直接操作 SVG 元素。

D3 不是 SVG Polyfill： 不像 Raphaël，它在不支持 SVG 的浏览器上为 SVG 提供 polyfill。 D3 直接操作 SVG，没有任何抽象层。您的浏览器需要支持 SVG 才能使 D3 正常工作。 (source)

例如，这是我根据 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 的一部分，而不是打开/写入/关闭外部文件。