2016-06-15 2 views
0

배열에 <SVG> 요소 코드가 있습니다. JavaScript를 사용하여 어떻게 추가 할 수 있습니까?<SVG> 요소를 배열에서 추가하는 방법

예 배열 :

global_array[0] = [ '<svg data="BusinessProductFigure" x="553.671875" 
y="167" id= "something" xmlns="http://www.w3.org/2000/svg" 
version="1.1"><rect x="4" y="4" width="60" height="14" 
fill="rgb(299,299,162)" stroke-linejoin="round" 
stroke="rgb(299,299,162)" stroke-width="1"/></svg>' ] 

[1]

for(var i = 0; i <= global_array.length; i++) { 
    document.getElementById("main_svg").innerHTML = global_array[i]; 
} 
}) 

이 오류를 제공하지 않습니다하지만 아무것도 추가하지 덧붙이 나는 다음을 시도했다. 콘솔에 체크인했습니다. 테스트 [2]

for(var i = 0; i <= global_array.length; i++) { 
    d3.select("#main_svg").append(global_array[i]); 
} 
}) 

에게 덧붙이

이것은 DOM 예외 오류가 있습니다.

여기
+1

가능한 중복 http://stackoverflow.com/questions/ 29855452/d3-append-insert-existing-svg-string-or-element-to-a-div) –

+0

예제 배열은'global_array'의 원소 0에 서브 배열을 할당하고 있습니다. 이 올바른지? –

답변

1

루프 종료 조건을 i<=global_array.length에서 i<global_array.length으로 변경하면 첫 번째 방법이 거의 작동합니다. 은 배열의 마지막 요소에서만 작동하기 때문에 거의이라고합니다. innerHTML을 설정하면 요소가 추가되지 않고 모든 내용이 대체됩니다. 또 다른 요구 사항은 컨테이너 ("#main_svg")가 <svg> 태그가 될 수 없다는 것입니다. 당신은 중첩 할 수 없습니다 <svg>

거의 작업 예 : https://jsfiddle.net/LukaszWiktor/wd3w2rjL/

[D3의 APPEND DIV에 (삽입) 기존 SVG 문자열 (또는 요소)] (의
1

내가 첫 번째 줄에 볼 수 있습니다 ..

변화 global_array[0]

또는

global_array[0] = '<svg data="BusinessProductFigure" x="553.671875" 
 
y="167" id= "something" xmlns="http://www.w3.org/2000/svg" 
 
version="1.1"><rect x="4" y="4" width="60" height="14" 
 
fill="rgb(299,299,162)" stroke-linejoin="round" 
 
stroke="rgb(299,299,162)" stroke-width="1"/></svg>';

이 코드에 따라 작동합니다 global_array에 :)

관련 문제