☰

JavaScript で SVG パスを変更する 質問する

tag-icon • tag-icon javascript html svg
JavaScript で SVG パスを変更する 質問する

SVG パスは次のとおりです。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="sss" viewBox="0 0 500 300">
  <path id="s3" d="M 10,90 Q 100,15 200,70 Z"/>
</svg>

値を変更するにはどうすればよいですかd?

なぜalert(document.getElementById('s3').d);私に与えるのですかundefined?

ベストアンサー1

属性は、次の別の方法で設定することもできますsetAttribute。

document.getElementById('s3').setAttribute('d', "M 10,90 Q 100,15 200,70 Z");

alert(document.getElementById('s3').getAttribute('d'));

それはうまくいくようです。

属性とプロパティには違いがあります。属性は設定され<elem attr='value'>、プロパティは動的に設定されます。

たとえば、入力要素は、何かを入力しても属性は変更されません。ただし、プロパティは変更されます。したがって、は.value正しい結果を返しますが、.getAttribute('value')は で設定された初期値を返しますvalue="something"。

あなたの場合、それは明示的な属性であり、プロパティではありません。したがって、は.d機能しませんが、 は機能します.getAttribute('d')。

http://jsfiddle.net/Kdp4v/

おすすめ記事