Javascript 如何使用闭包库复制HTML中嵌入的SVG DOM？_Javascript_Html_Dom_Google Closure Library

Javascript 如何使用闭包库复制HTML中嵌入的SVG DOM？

javascript html dom

Javascript 如何使用闭包库复制HTML中嵌入的SVG DOM？,javascript,html,dom,google-closure-library,Javascript,Html,Dom,Google Closure Library,我想在HTML中复制一个嵌入式SVG，在里面重新定义它的ID 例如，有一个HTML文件，如 <html> <body> <div id="svgs"> </div>  <div style="display:none;"> <svg xmlns="http://www.w3.org/2000/svg" width="181" heigh

我想在HTML中复制一个嵌入式SVG，在里面重新定义它的ID

例如，有一个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>

请注意，复制的DOM下的所有ID都已从“blahblah”重新定义为“blahblah_1”和“blahblah_2”

如何使用Google closure library巧妙地做到这一点？

以下是一种方法：

节点复制。使用标准DOM方法创建节点的深度克隆

重新定义ID。

goog.ui.Component

框架广泛用于生成表单

：

的唯一ID（如果您不介意的话，在中还有另一个实现）。使用相同的基本思想，您可以创建自己的ID生成器

树上行走。dom名称空间有许多节点迭代器，可以可靠地用于到达必须更改ID的元素

我设置了一个可创建与在数据数组中指定的替换集数量相同的克隆、统一ID并将克隆附加到

#svgs

如果不需要DOM方法，闭包库还提供一个html SAX解析器（在“第三方”下），它可以作为无DOM方法的基础（注意：解析器不支持现成的SVG元素）

<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>