如何使用Closure庫在HTML中複製嵌入式SVG DOM？

我想在HTML中複製嵌入式SVG，在裏面重新定義它的ID。如何使用Closure庫在HTML中複製嵌入式SVG DOM？

例如，有一個HTML文件等

<html> 
    <body> 
    <div id="svgs"> 
    </div> 

    <!-- Template --> 
    <div style="display:none;"> 
     <svg xmlns="http://www.w3.org/2000/svg" width="181" height="59" id="type0svg"> 
     <g style="display:inline" transform="translate(0,0)"> 
      <text id="ph1" x="23.6" y="51.7">ph1</text> 
      <text id="ph2" x="105.1" y="51">ph2</text> 
     </g> 
     </svg> 
    </div> 
    </body> 
</html>

和數據[{ph1:'placeholder1',ph2:'placeholder2'},{ph1:'apple',ph2:'orange'}]。我想生成一個DOM像...

<html> 
    <body> 
    <div id="svgs"> 
     <!-- {ph1:'placeholder1',ph2:'placeholder2'} --> 
     <svg xmlns="http://www.w3.org/2000/svg" width="181" height="59" id="type0svg1"> 
     <g style="display:inline" transform="translate(0,0)"> 
      <text id="ph1_1" x="23.6" y="51.7">placeholder1</text> 
      <text id="ph2_1" x="105.1" y="51">placeholder2</text> 
     </g> 
     </svg> 

     <!-- {ph1:'apple',ph2:'orange'} --> 
     <svg xmlns="http://www.w3.org/2000/svg" width="181" height="59" id="type0svg2"> 
     <g style="display:inline" transform="translate(0,0)"> 
      <text id="ph1_2" x="23.6" y="51.7">apple</text> 
      <text id="ph2_2" x="105.1" y="51">orange</text> 
     </g> 
     </svg> 
    </div> 

    <!-- Template --> 
    <div style="display:none;"> 
     <svg xmlns="http://www.w3.org/2000/svg" width="181" height="59" id="type0svg"> 
     <g style="display:inline" transform="translate(0,0)"> 
      <text id="ph1" x="23.6" y="51.7">ph1</text> 
      <text id="ph2" x="105.1" y="51">ph2</text> 
     </g> 
     </svg> 
    </div> 
    </body> 
</html>

注意下複製DOM所有的ID已經從「blahblah」到「blahblah_1」和「blahblah_2」重新定義。

這怎麼可以巧妙地使用Google閉包庫來完成？

來源

2014-03-05 Izumi Kawashima

這裏有一個辦法：

節點的重複。使用標準DOM方法Node.cloneNode(true)來創建節點的深層克隆。

重新定義ID。 goog.ui.Component框架廣泛使用goog.ui.IdGenerator來生成<ID>:<increment>表單的唯一ID（如果您不介意事件行李，則在goog.events.getUniqueId中有另一種實現方式）。有了相同的基本想法，您可以創建自己的ID生成器。

樹行走。命名空間有許多節點迭代器，可以可靠地用於到達其ID必須更改的元素。

我設置了一個JSBin example，它創建了與數據數組中指定的替換集一樣多的克隆，並將這些克隆附加到#svgs。

如果DOM方法是不可取的，封庫還提供了HTML SAX解析器（goog.string.html.HtmlParser「第三方」下），它可以作爲一個DOM少方法的基礎（注：解析器不支持SVG元素開箱）。

來源

2014-03-19 22:29:51 mesteiral

如何使用Closure庫在HTML中複製嵌入式SVG DOM？

回答

相關問題