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

Question

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

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

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

有什么想法吗？

谢谢！

Answer 1

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

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

然后，您可以通过使用复制变量引用克隆中的内容。

Answer 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是一个引用，因此克隆只是复制指针（浅复制）。