1

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

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

我决定使用 jQuery SVG，因为（在我阅读的其中一个文档中写道：）不可能使用 Raphael 更改现有的加载 SVG。我不确定，如果这是真的。

另一方面，写了一些软件：jQuery SVG plugin is outdated?!

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

现在，我使用 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 元素（按类或元素类型）以更改它们（或者我可能必须迭代槽？）？

谢谢你。

4

1 回答 1

0

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

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

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

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

现在：一直以来，我都喜欢更改 SVG 样式，我删除旧样式 SVG 元素$('style', mainSVG.root()).remove();，修改svgStyleJS 对象（添加或删除属性）并创建新的 SVG 样式标签（参见清单中的 #3 和 #4以上）

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

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

于 2012-09-11T12:45:37.863 回答