既存の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 

これを行うことはできますか？ d3.xmlを使用しないと、私はどこかからsvgファイルをロードしたくないからです。

これを行うことで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/

EDIT：質問の更新に基づいて：

をあなたは文字列を追加したい場合はstr内側<g>とid "test"

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>