如何使用jQuery或JavaScript從html頁面獲取SVG代碼？

我有一個簡單的SVG THML頁是這樣的：如何使用jQuery或JavaScript從html頁面獲取SVG代碼？

<div id="plan"> 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
<g id="layer3"> 
    <rect width="105.71429" height="80" x="351.42856" y="152.36218" id="rect1" style="fill:#008000"></rect> 
    <rect width="120" height="85.714287" x="500" y="389.50504" id="rect2" style="fill:#008000"></rect> 
</g> 
</svg> 
</div>

我怎樣才能得到字符串：

<rect width="105.71429" height="80" x="351.42856" y="152.36218" id="rect1" style="fill:#008000"></rect>

從這個SVG。我可以使用jquery和jquery svg。我嘗試：

$(document).ready(function() { 
    console.log($("#plan #rect1")[0]); 
})

在控制檯我把這個字符串，但我必須把字符串變量是這樣的：

var str = $("#plan #rect1")[0];

變量str是[對象SVGRectElement] [進入鏈接這裏描述] 1

來源

2012-03-26 VasyambaTula

$('#rect1')[0]

這應該有所幫助。如果您想訪問標籤而不是jQuery元素，請使用[]獲取封裝元素。

編輯：

This should do the trick for you。

解釋的解決方案是將您的選擇包裝到另一個標籤中並在其上調用.html（）以顯示其內容。

追加到您的臨時DIV之前，不要忘了.clone（）調用，否則你將不得不在你的HTML :)

來源

2012-03-26 12:25:53 Mordhak

我使用var str = $（「＃plan>＃rect1」）[0];警報（STR）;但str未定義 – VasyambaTula 2012-03-26 13:03:06

$（「＃plan>＃rect1」）將搜索計劃中具有id「rect1」的下一個孩子，但您的孩子是「g」標記。這就是$（「＃plan>＃rect1」）不返回任何內容的原因。「>」表示直接的孩子。改爲使用$（「＃plan＃rect1」）。 – Mordhak 2012-03-26 13:08:13

我使用：var str = $（「＃plan＃rect1」）。html（）; alert（str）;它使錯誤 - 未捕獲TypeError：不能調用未定義的方法'替換'。我使用：var str = document.getElementById（'rect1'）; var st = str.innerHTML; 警報（st）;但var st未定義 – VasyambaTula 2012-03-27 09:46:19

要結合前面的答案（這是不明確的，我在一些麻煩首先）獲取SVG字符串的方式如下：

var str = $('<div>').append($('#plan #rect1').clone()).html();

來源

2012-10-30 16:53:11

非常好，謝謝 – nodrog 2012-11-23 16:58:58

如何使用jQuery或JavaScript從html頁面獲取SVG代碼？

回答

相關問題