2

svg図面の文字列があります。たとえば、私の文字列varには次の内容が含まれています。

<svg width="612" height="394" xmlns="http://www.w3.org/2000/svg">
 <g>
     <title>Layer 1</title>
     <rect id="svg_1" height="152" width="265" y="44" x="91" stroke-width="5" stroke="#000000" fill="#FF0000"/>
 </g>
 <g>
     <title>Layer 2</title>
     <rect id="svg_2" height="125" width="151" y="157" x="399" stroke-width="5" stroke="#000000" fill="#FF0000"/>
 </g>
</svg>

情報を入手する簡単な方法はありますか？たとえば、長方形の高さを取得するための最良の方法は何ですか？レイヤー2から長方形の高さのみを選択する方法は？答えてくれてありがとう

4

2 に答える 2

1

xmldomパーサーを使用します。
他の回答で述べられているように、jQueryはhtml/xmlを操作およびトラバースするための非常に優れたソリューションです。 

 $(svgString).find('g:eq(1) rect').attr('height');

サードパーティのライブラリを使用したくない場合は、プレーンなJavaScriptでこれを行うことができますが、svg文字列をDOMに追加する必要があり ます。

var svgString = a='<svg width="612" height="394" xmlns="http://www.w3.org/2000/svg"><g>     <title>Layer 1</title>     <rect id="svg_1" height="152" width="265" y="44" x="91" stroke-width="5" stroke="#000000" fill="#FF0000"/> </g> <g>     <title>Layer 2</title>    <rect id="svg_2" height="125" width="151" y="157" x="399" stroke-width="5" stroke="#000000" fill="#FF0000"/></g></svg>',
    tempElement = document.createElement('div');

tempElement.innerHTML = svgString;
var height = tempElement.querySelector('g:nth-child(1) rect').getAttribute('height');

これが実際のデモです：http：//jsfiddle.net/gion_13/5K5x2/

于 2012-12-28T15:04:29.707 に答える
1

これを試して？

コードにjQueryを含め、以下を使用します。

$("svg").find("rect").attr("height");

文字列の使用：

var str = "<svg> ... </svg>"
$(str).find("rect").attr("height");
于 2012-12-28T14:13:49.277 に答える