使用jQuery加载外部SVG并更改SVG

我需要加载一个现有的SVG文档，以便进行一些修改：更改颜色并用矩形替换所有圆

我读过一篇关于使用javascript访问SVG节点、Raphael扩展或JQuerySVG的文章

我决定使用jQuerySVG，因为在我读到的其中一个文档中写到：不可能用Raphael更改已加载的现有SVG。我不确定这是不是真的

另一方面，编写了一些软件：jQuerySVG插件过时了

我不确定这是否正确

现在，我使用jQuerySVG插件加载SVG。SVG由许多圆圈组成，如下所示：

<svg version="1.1" width="" height="">
 <rect class="background" x="0" y="0" width="136" height="136" style="fill:white"/>
 <circle class="dot" cx="10" cy="10" r="2"/>
 <circle class="dot" cx="14" cy="10" r="2"/>
 <circle class="dot" cx="18" cy="10" r="2"/>
 <circle class="dot" cx="22" cy="10" r="2"/>
  [...]
 <style>
  .dot {fill:#000000;}
 </style>
</svg>

mainSVG = $("#placehoplder").svg('get');
mainSVG.load(data, {addTo: true,  changeSize: false}); 
mainSVG.style('.dot {fill:'#f4a200'}');

这是可行的，但它向SVG添加了一个额外的样式元素/节点

因此，第一个问题是：如何更改/覆盖现有样式元素

达到第二个目标：我不知道如何处理这个问题

一般来说，我不知道如何选择SVG元素。使用谷歌，我仍然一次又一次地发现同样的问题，这对我没有帮助。就我所知，jQuerySVG文档也没有帮助。因为缺少基本的东西

例如，更改所有圆半径的简单测试不起作用

allCircles=$('*[class~="dot"]');
mainSVG.change(allCircles,{r:10});

第二个问题是： 如何按类或元素类型选择一组SVG元素以更改它们，或者我是否需要迭代

---

谢谢。

在网上搜索了一段时间后，我决定选择以下解决方案：

因此，第一个问题是：如何更改/覆盖现有样式元素

更改现有样式元素很困难，就像使用JS更改HTML样式元素一样。 我选择下面的方法是因为它看起来是最好的选择。最后，它删除了旧样式并添加了新样式：

在没有样式标记的服务器端创建SVG 将默认样式定义为javascript对象 svgStyle={.dot'：{fill'：'white'} 创建一个方法将svgStyle转换为HTML源代码，返回mySvgStyle='.dot{fill:white} 加载SVG并将样式元素应用于SVG mainSVG.stylemySvgStyle； 现在：一直以来，我都喜欢更改SVG样式，我删除了旧式SVG元素$'style'，mainSVG.root.remove；，修改svgStyle JS对象添加或删除属性并创建新的SVG样式标记请参见上面清单中的3和4

如何按类或元素类型选择一组SVG元素以更改它们，或者我是否需要迭代

看起来，迭代是唯一的方法。jQuerySVG插件无法处理一组DOM SVG元素