jQuery 또는 JavaScript를 사용하여 HTML 페이지에서 SVG 코드를 가져 오는 방법은 무엇입니까?

Question

나는이 같은 SVG와 간단한 thml 페이지가 :

내가 문자열을 얻을 수있는 방법

<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

Answer 1

$('#rect1')[0] 

도움이됩니다. jQuery 요소 대신 태그에 접근하려면 []를 사용하여 캡슐화 된 요소를 가져옵니다.

편집 :

This should do the trick for you.

설명 된 해결책은 선택한 태그를 다른 태그로 묶고 .html()을 호출하여 내용을 표시하는 것입니다.

그렇지 않으면 당신은 당신의 HTML :

Answer 2

이 나를 위해 명확하지 않았다 이전 답변을 (결합에 몇 가지 문제가있을 것이다, 당신의 임시 사업부로를 추가하기 전에 .clone() 호출을 잊지 마세요 SVG 문자열을 가져 오는 방법은 다음과 같습니다.

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