2012-03-26 84 views
1

我有一個簡單的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

回答

1
$('#rect1')[0] 

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

編輯

This should do the trick for you

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

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

+0

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

+0

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

+0

我使用: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

5

要結合前面的答案(這是不明確的,我在一些麻煩首先)獲取SVG字符串的方式如下:

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

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

相關問題