기존 svg 태그에 svg 문자열 요소를 삽입하십시오.

Question

기존 <svg></svg>이 있는데, 문자열 인 svg 요소를 추가하고 싶습니다. 예 :

var svg_string = '<g><text x="100" y="100">Hello</text></g>'; 

d3.select('svg').append(svg_string); // or something like that 

내가 그렇게 할 수 있습니까? 내가 어딘가에서 svg 파일을로드하고 싶지 않기 때문에 d3.xml을 사용하지 않고.

그리고이 작업을 통해 jQuery를 사용해 보았습니다.

$('svg').append('<svg><g><text></text></g></svg>') 

하지만 더 나은 방법이 있는지 SVG 태그를

UPDATE를 추가하지 않고, 알고 싶다 : 죄송합니다, 나 자신을 명확하게하지 않았다.

나는

<svg><g id="test"></g></svg> 

$('#test').append(svg_string) 

감사 같은 SVG 요소로 svg_string를 추가하고 싶습니다.

Answer 1

올바른 방법은 각 속성 또는 노드를 명시 적으로 선언하는 것입니다.

d3.select('svg').append("g").append("text").attr("x",100).attr("y",100).text("Hello"); 

당신이 정말로 다음 HTML 문자열을 추가하려면

사용 :

d3.select('svg').html("<g><text x=\"100\" y=\"100\">Hello</text></g>"); 

예 : https://jsfiddle.net/ero38b49/

편집 : 질문 업데이트를 기반으로 :

당신은 문자열 str를 추가하려면 내부 <g>과 id "시험"

,

var str = "<g><text x=\"100\" y=\"100\">Hello</text></g>"; 
    d3.select('#test').html(str); 

이것은 당신에게 줄 것이다 :

<svg> 
    <g id="test"> 
     <g><text y="100" x="100">Hello</text> 
     </g> 
    </g> 
</svg> 

예 : https://jsfiddle.net/ero38b49/1/ 당신이 <svg>에 append 문자열 str을하고자하는 경우

(id "테스트"와 <g>의 형제로)

d3.select("svg").html(d3.select("svg").html() + str); 

이렇게하면 다음과 같이 나타납니다.

<svg> 
    <g id="test"/> 
    <g><text y="100" x="100">Hello</text> 
    </g> 
</svg> 

예 : https://jsfiddle.net/ero38b49/2/

Answer 2

<svg><g id = 'svg-element'></g></svg> 
<script> 
    var svg_string = '<g><text x="100" y="100">Hello</text></g>'; 
    document.getElementById('svg-element').parentNode.innerHTML += svg_string; 
</script>