如何獲取g元素的字符串格式的svg？

我想知道是否有可能使用jQuery或JavaScript獲取svg元素的g元素中的內容？如何獲取g元素的字符串格式的svg？

<svg> 
<g><path>...</path></g> 
</svg> 
<script> 
    var contents = $("div").append($("svg g").clone()).html(); 
</script>

這將與路徑或克元件內的任何部分，但不是克元件本身正常工作。此外，對於一些原因，如果我遇到這樣的代碼：

<script> 
    var contents = $("div").append($("path").parent().clone()).html(); 
</script>

我能得到的內容，但對於項目，我需要能夠與G元素（在這種情況下，層）匹配，並得到它的內容。

想要對這個入門的理解進行修正，他們都沒有錯誤地工作，但第一個將遠遠超過g標籤，第二個將獲得g標籤。 –

它似乎工作，但您的例子有幾個問題。

首先，你不能在SVG元素上使用html()（見這裏回答：Why .html() doesn't work with SVG selectors using jquery ?），所以這取決於你想用g元素做什麼。

其次，您將g元素附加到div，但它需要位於svg元素內。因此，對於這樣的頁面：

<div> 
    <svg> 
     <g><path d='m10,10l10,0,0,-10,-10,0'></path></g> 
    </svg> 
</div>

您可以克隆g元素是這樣的：那麼現在

g = $("svg g").clone(); 
$('svg').append(g); 

// Move the cloned square 
g.children().first().attr('d', 'm100,100l10,0,0,-10,-10,0');

你可以做任何你想要的變量摹在這個例子（見如果您需要直接開始編輯內部XML，而不是使用jQuery來修改內容，那麼這個鏈接的答案）。

爲了得到你需要使用XMLSerializer如上面的鏈接答案中描述的字符串：

var s = new XMLSerializer(); 
var str = s.serializeToString(g[0]); 
console.log(str);

這裏我使用g[0]得到G的DOM元素。如果你只想要內容嘗試(g.children().first())[0]。我已經更新了小提琴。

但是，根據您要對字符串做什麼，您可能不需要這樣做。 jQuery可以直接修改元素 - 這取決於你想要做什麼。

2013-10-09 02:53:52 SpaceDog

我想獲取svg g元素的內容（標記）。 –

要做到這一點的方法是在我鏈接的其他答案中，我更新了小提琴並編輯了我的答案以顯示示例。 – SpaceDog

我不確定這是不是你想要獲取g元素的內容。我試着用一個簡單的腳本來操縱它。

$("[name=getElement]").click(function(){ 
    $('.getThisElement').hide(); 
    $("#test"+$(this).val()).show('fast');

試試這個JSfiddle我創建了。

2013-10-09 02:56:39 novice

回答