1

私はsvg文字列を持っています。情報を取得するために、このリンクで答えを得ました javascriptでsvg文字列から情報を取得する方法? jquery を使用します。しかし、属性を変更する方法を知っている人はいますか? たとえば、レイヤー 2 の四角形の高さを他の値に変更する方法は? 存在しない新しい属性を追加するには? たとえば、レイヤ 2 の rect に stroke-dasharray="1,1" を追加するには? ありがとう

<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>

たとえば、私の文字列は次のとおりです。str="<svg width........</g></svg>"

4

2 に答える 2

2

取得するだけでなく、値を設定するだけです..

jquery では、2 番目のパラメーター.attr()を使用して、設定する値を使用できます...

$('#svg_2').attr('height', 200);

と

$('#svg_2').attr('stroke-dasharray', "1,1");

http://jsfiddle.net/gaby/FX67f/1/のデモ

実際の文字列が必要で、svg が DOM ではなく単なる変数である場合は、次のようにします。

var fixedstr = $(str).wrapAll('<div>')
                     .find('g:eq(1) rect')
                     .attr('height', 200)
                     .attr('stroke-dasharray', "1,1")
                     .closest('div')
                     .html();

div最初にそれから jquery オブジェクトを作成し、それを要素にラップして、後でその.html()(実際の svg 文字列) を取得できるようにします。

gで 2 番目の要素の rect を見つけ、.find('g:eq(1) rect')を使用し.attr()てその属性を変更します。

最後に.closest('div')、 を使用してコンテナ div に戻り、 を使用.html()してコンテンツを取得します。

このバージョンのデモ http://jsfiddle.net/gaby/FX67f/2/

于 2013-01-02T10:57:42.463 に答える
0

私はそれを試していませんが、うまくいくはずです: 新しい値を設定します:

$("svg").find("rect#svg_2").attr("height", new_val);
于 2013-01-02T10:55:53.950 に答える