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

在html代码中操作SVG文件（对象）是一个挑战。Snap、Raphael中有一些解决方案，但我需要直接通过JavaScript或JQuery来实现。这就是我到目前为止的情况：

JS:

window.onload=function（）{
var svgDoc=$（“#testSVG”）[0].contentDocument；
$（“路径3380”，svgDoc）.css（“笔划”，“红色”）；
};

---

谢谢你

通常，当我想单独使用javascript创建或操作SVG图形时，我会使用D3.js库

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

D3不是SVG多边形填充： 与Raphaël不同，Raphaël在不支持SVG的浏览器上为SVG提供polyfill。D3直接操作SVG，没有任何抽象层。您的浏览器需要支持SVG以便D3正常工作。 （）

例如，我在D3教程中制作了一个演示，该演示使用javascript本机

new Date（）

函数构造和操作SVG元素，以创建一个由javascript/SVG驱动的实时时钟：

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>

---

如果您想了解更多关于使用D3:Hi all更改svg img的svg路径和笔划颜色的详细信息，请不要使用

查看此SO线程。德雷特，谢谢你的评论。Paul LeBeau，我尝试在不使用Raphael、Snap等的情况下通过JavaScript或JQuery操作外部SVG文件。可能有10多个SVG文件，每个文件都可能相当长，因此我尝试避免将内联SVG XML嵌入HTML页面。我发布的代码（JS或JQuery）有什么问题？它加载对象“testSVG”，但我无法操作单独的元素（例如“path3380”）来更改笔划的颜色。我怎么做？谢谢。@learnforver您忽略了我文章中解释该特定问题的部分：“要动态操作DOM中的SVG数据，它必须是DOM的一部分，而不是打开/写入/关闭外部文件。”如果您需要对许多SVG文件执行此操作，请在线动态加载它们。如果您使用的是
php
，那么您可以使用
file\u get\u contents（）
，但您需要在DOM中使用它们，否则，如果不在文件本身中写入数据，您就无法操作属性，这将1）更改文件的实际内部内容2）为同时访问同一图像的用户带来服务器问题我现在看到了。谢谢你的跟进，德雷特。我真的很感激。你的问题是什么？
<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>

<!-- 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>