訪問svg中符號實例的內部內容

我有一個包含4個符號實例的svg文檔。我想分別處理每個實例中的屬性。例如。更改某些標籤的文本，更改形狀的顏色，移動內部形狀。訪問svg中符號實例的內部內容

這似乎不可能，因爲「SVGUseElement」的節點列表是空的。

在我看來，人們需要遞歸解開每個符號的內容到一個新的文檔中。

有什麼想法？

謝謝！

來源

2012-02-05 asinning

符號是一個視圖而不是原始副本。改變原來的和所有的意見（符號）將改變。聽起來像你想克隆節點和操縱克隆而不是使用符號。

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

然後你可以通過使用copy變量引用它們來克隆克隆中的東西。

來源

2012-02-05 15:44:48

這樣做會很棒，但我們希望開發一個工作流程，讓設計人員在Illustrator中佈局GUI，輸出到SVG，然後在SVG圖層周圍編寫視圖對象。設計師將是製作符號副本的人。如果您還沒有猜到，我們正在嘗試將我們的開發流程從Flash更改爲HTML5。 – asinning 2012-02-05 15:59:01

但符號不是副本，他們只是原始視圖。如果你想要一個副本，你需要做一個。 – 2012-02-05 16:16:58

@asinning因此，讓設計師使用符號，但必要時使用JavaScript將符號'爆炸'成爲一個完整的副本，如羅伯特在這裏所建議的。 – Phrogz 2012-02-06 14:08:44

這不是一個答案，但可能會有所幫助。

我也試圖訪問符號分組的內部內容以便例如在一個實例中更改元素的位置或顏色。在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是一個引用，所以克隆只是複製指針（淺拷貝）。

來源

2014-05-01 00:37:40

訪問svg中符號實例的內部內容

回答

相關問題