Question

我正在使用SVG.js库来操作一个现有的SVG文件。我使用Inkscape创建了此图像：http://svgur.com/i/100.svg

我尝试做的是访问内部粉红色矩形并为其制作动画，但我甚至不知道如何选择该特定元素。

我有一个简单的＆＃39; test.html＆＃39;用：<div id="drawing"></div>

然后我可以使用以下行成功加载图像：

var draw = SVG('drawing').size(500, 500);
var use  = draw.use('svg8', BASE_URL + '/app/test/test.svg');
use.move(0, 0);

如何立即访问SVG文件的内部元素<rect id="rect4928"></rect>？

非常感谢。

Answer 1

在研究了这几天之后，我意识到我不可能做我正在尝试的事情。当您通过<use>属性导入一个特定的SVG图像时，此图像将作为单个元素导入，所有内部元素都将转到影子DOM，并且它们不再可访问。在本文中，您可以通过CSS阅读非常好的解释和可能的解决方法：https://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/

就我而言，即使<use>元素已将所有内部元素放入常规DOM中，也不够。我需要完全相同的图像在同一个HTML中出现8次，我还需要单独修改每个SVG图像的所有内部元素（上面的示例只是一个简化版本，在真实场景中我有一个大约15的图像我必须转换的内部元素：改变颜色，旋转......）。出于这个原因，我必须为每个内部元素分配一个唯一的ID，例如，如果我有一个包含15个重复8次内部元素的SVG，最后我需要125个唯一ID。

我最终做的是在Inkscape中创建这8个图像中的一个。之后，我构建了一个简单的Java程序来制作8个原始文件的副本，并为最终HTML中共存的所有元素提供唯一的ID。一旦我拥有8个具有唯一ID的相同SVG副本，我只是直接将它们嵌入到HTML中，现在我可以使用vanilla JS轻松访问所有内容（我不再需要SVG.js了）

接下来我可以看到我尝试做的最终结果：https://jsfiddle.net/6shzx7Lk/

在最后的图片中，我有8个蓝色SVG文件，8个黄色和2个灰色块。例如，您可以看到每个蓝色图像内部都有10个绿点，如果您检查源代码，您可以看到每个点都有唯一的ID。通过这种方式，我将能够轻松修改所有8个蓝色图像中的每个绿点（并且与其余元素相同）。我还可以通过根据用户屏幕大小排列不同的元素来使用Bootstrap调整最终图像的大小。

我不知道是否有更好的方法来实现这一目标但是在最后几天使用SVG之后，这是我找到的针对我的特定问题的解决方案。

非常感谢你的帮助。

Answer 2

如果你和香草JS一起去，你可以做这样的事情。您不必创建独特的ID。

使用对象标签嵌入svgs

<object id="svg1" data="100.svg" type="image/svg+xml"></object>
<object id="svg2" data="100.svg" type="image/svg+xml"></object>

然后使用此javascript。

window.onload = function (){
    var c = document.getElementById("svg1").contentDocument;
    var rect = c.getElementById("rect4928");
    rect.setAttribute("style", "fill: green;");

    var c2 = document.getElementById("svg2").contentDocument;
    var rect = c2.getElementById("rect4928");
    rect.setAttribute("style", "fill: green;");
}

Answer 3

您可以为该元素添加ID并使用：

var element = SVG.get('purple_rect');
element.move(30,30);

这是来自文档，您可以轻松地操纵元素。这是codepen示例 http://codepen.io/anon/pen/peKzYM#anon-login

如何操作导入的SVG文件中的内部元素

3 个答案: