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

时间:2012-02-05 15:02:41

标签: jquery svg jquery-svg

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

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

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

有什么想法吗?

谢谢!

2 个答案:

答案 0 :(得分:2)

符号是视图而不是原始副本。更改原始视图(符号)将更改。听起来你想要克隆节点并操纵克隆而不是使用符号。

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

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

答案 1 :(得分:0)

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

我也试图访问符号分组的内部内容,以便例如在一个实例中更改元素的位置或颜色。在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是一个引用,所以克隆只是复制指针(浅拷贝)。