访问 svg 中符号实例的内部内容答案

【问题标题】：access inner contents of symbol instances within svg访问 svg 中符号实例的内部内容
【发布时间】：2014-05-01 08:37:40
【问题描述】：

我有一个包含 4 个符号实例的 svg 文档。我想分别操作每个实例中的属性。例如。更改某些标签的文本、更改形状的颜色、移动内部形状。

这似乎不可能，因为“SVGUseElement”的节点列表是空的。

在我看来，需要递归地将每个符号的内容解压缩到一个新文档中。

有什么想法吗？

谢谢！

【问题讨论】：

标签： jquery svg jquery-svg

【解决方案1】：

符号是一种视图，而不是原件的副本。更改原始视图，所有视图（符号）都会更改。听起来您想克隆节点并操作克隆而不是使用符号。

var copy = element.cloneNode(true); 将创建元素及其子元素的副本。

然后你可以通过使用复制变量引用它们来克隆中的东西。

【讨论】：

那太好了，但我们希望开发一个工作流程，允许设计师在 Illustrator 中布局 GUI，输出到 SVG，然后围绕 SVG 层编写一个视图对象.设计师将是制作符号副本的人。如果您还没有猜到，我们正在尝试将我们的开发流程从 Flash 更改为 HTML5。
但符号不是复制品，它们只是原始视图。如果您想要一份副本，您需要制作一份。
@asinning 所以让你的设计师使用符号，但必要时使用 JavaScript 将符号“分解”成一个完整的副本，正如罗伯特在这里所建议的那样。

【解决方案2】：

这不是答案，但可能会有所帮助。

我也在尝试访问符号分组的内部内容，以便例如在一个实例中更改元素的位置或颜色。在 Chrome 中工作，如果你定义了一个符号，那么它，你可以通过如下方式访问符号实例中元素的属性：

<defs>
<symbol id="what" ... >
</defs>

<use id="what1" xlink:href="#what" ... >

...

<script>
useobj = document.getElementById("what1");
innerobj = useobj.instanceRoot.firstChild.correspondingElement;
innerobj.x1.baseVal.value = 100;

但是，这会更改所有实例。我试过这个：

useobj = document.getElementById("what1").cloneNode(true)

但它仍然改变了所有实例。我推断 instanceRoot 是一个引用，所以克隆只是复制指针（浅拷贝）。

【讨论】：