將svg字符串元素插入現有的svg標籤

我有一個現有的<svg></svg>，我想追加一個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_string追加到SVG元素一樣

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

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

感謝。

來源

2016-08-16 03t02

正確的做法是明確聲明每個屬性或節點。

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/

如果你想append串str到<svg>（截至<g>與id 「測試」兄弟姐妹）

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/

來源

2016-08-16 23:36:45 DinoMyte

我知道如何用這種方法做的，但我想用字符串追加。通過這樣做，它迫使我解析每個標籤和他們的屬性，有點複雜：/ – 03t02

更新了答案。我仍然會推薦使用單獨的符號 – DinoMyte

我剛更新了我的答案:) – 03t02

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

來源

2016-08-16 23:37:43 csander

這種方法的問題是你不能插入一個svg元素的svg_string。如果我有一個是svg元素的ID，則此方法不起作用。 – 03t02

我不確定你的意思。這段代碼適合我，它將文本添加到svg元素的末尾。 – csander

對不起，我沒有說清楚。我想說的是，在這種情況下：的document.getElementById（ '測試'）你的方法doen'st工作 – 03t02

將svg字符串元素插入現有的svg標籤

回答

相關問題