클로저 라이브러리를 사용하여 HTML에 포함 된 SVG DOM을 복제하는 방법은 무엇입니까?

HTML에 포함 된 SVG를 복제하고 내부에 ID를 다시 정의하고 싶습니다.클로저 라이브러리를 사용하여 HTML에 포함 된 SVG DOM을 복제하는 방법은 무엇입니까?

예를 들어,

<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'}] 같은 HTML 파일이 있습니다. 나는 ... 같은 DOM을 생성 복사 DOM 아래의 모든 ID가 'blahblah_1'와 'blahblah_2'에서 'blahblah'에서 다시 정의되어 있는지

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

공지하고자합니다.

어떻게하면 Google 폐쇄 라이브러리를 사용하여 현명하게 수행 할 수 있습니까? 노드의

복제 :

출처

2014-03-05 Izumi Kawashima

여기에 접근합니다. 표준 DOM 방법 Node.cloneNode(true)을 사용하여 노드의 딥 클론을 작성하십시오.

ID의 재정의. goog.ui.Component 프레임 워크는 이라는 고유 ID를 생성하기 위해 광범위하게 goog.ui.IdGenerator을 사용합니다 (이벤트 수하물에 신경 쓰지 않는다면 goog.events.getUniqueId에 또 다른 구현이 있음). 동일한 기본 아이디어로 자신 만의 ID 생성기를 만들 수 있습니다.

트리 워킹. goog.dom 네임 스페이스에는 ID를 변경해야하는 요소에 도착하기 위해 안정적으로 사용할 수있는 여러 노드 반복자가 있습니다.

대체 배열이 데이터 배열에 지정되고 ID를 고유하게 지정하고 클론을 #svgs에 추가하는만큼 많은 복제본을 생성하는 JSBin example을 설정했습니다. 파서가 지원하지 않습니다 DOM 방법이 바람직하지 않은 경우

는 폐쇄 도서관은 또한 DOM없는 접근의 기본 역할을 할 수 있습니다 ("타사"아래 goog.string.html.HtmlParser)는 HTML SAX 파서 (메모를 제공합니다 SVG 요소를 상자 밖으로 가져옴).

출처

2014-03-19 22:29:51 mesteiral

클로저 라이브러리를 사용하여 HTML에 포함 된 SVG DOM을 복제하는 방법은 무엇입니까?

답변

관련 문제