Question

我需要加载现有的SVG文档才能进行一些修改：更改颜色并用矩形替换所有圆圈。

我读了一篇关于使用javascript访问SVG节点，或Raphael扩展或jQuery SVG的消息。

我决定使用jQuery SVG，因为（在我读过的其中一个文档中写道:)它无法用Raphael更改现有的，加载的SVG。如果确实如此，我不确定。

另一方面，写了一些软件：jQuery SVG插件已经过时了？！

我不确定，如果这是正确的。

现在，我使用jQuery SVG插件加载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>

现在应该可以： 1.）通过更改类dot和更改所有圆圈的颜色 2.）用矩形替换所有圆圈。

为达到第一个目标，我使用svg.style()，如下所示：

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

这有效，但它为SVG添加了一个额外的样式元素/节点。

所以第一个问题是：如何更改/覆盖现有的样式元素？

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

我不知道如何选择一般的SVG元素。使用谷歌，我仍然一次又一次地找到相同的stackoverflow问题，这对我没有帮助。此外，jQuery SVG文档对我的知识点没有帮助。（因为缺少基础知识）

例如，这个改变所有圆的半径的简单测试不起作用。

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

所以第二个问题是：如何选择一组SVG元素（按类或元素类型）以便更改它们（或者我可能必须迭代？）？

谢谢。

Answer 1

在网上搜索e之后，我决定选择以下解决方案：

所以第一个问题是：如何更改/覆盖现有的样式元素？

更改exiting样式元素很困难，比如使用JS更改HTML样式元素。我选择以下方式（因为它看起来是最好的选择）。最后它删除旧样式并添加新的：

在服务器端创建没有样式标记的SVG
将默认样式定义为javascript对象
svgStyle = {'.dot':{'fill':'white'}}
创建一种方法，将svgStyle转换为HTML源，返回mySvgStyle=' .dot {fill:white}
加载SVG并将样式元素应用于SVG
mainSVG.style(mySvgStyle);

现在：我一直想改变SVG风格，我删除旧样式的SVG元素$('style', mainSVG.root()).remove();，修改svgStyle JS对象（添加或删除属性）并创建新的SVG样式标记（参见上面列表中的＃3和＃4）

如何选择一组SVG元素（按类或元素类型）以更改它们（或者我可能必须迭代？）？

看起来，迭代是最重要的方式。 jQuerySVG插件接缝无法处理DOM（SVG）元素组。

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

1 个答案: