元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 menu

【SVG】特定の要素の取得

getElementByIdメソッドを使って、特定の要素を取得する方法を見ていきます。id属性を頼りに特定の要素を取得します。イベントが発生していない要素に対して、処理を設定することができます。

特定の要素の取得

要素のid属性に属性値を設定する。getElementByIdメソッドを使って、特定の要素を取得する。

ここでは、長方形をクリックすると円がその色に変わる。

<circle id="ball" cx="50" cy="20" r="10" fill="seagreen"/>

<g font-size="8" text-anchor="middle">
  <g fill="magenta" onclick="setColor('magenta')">
  <rect x="20" y="40" width="20" height="15"/>
  <text x="30" y="62">magenta</text>
  </g>
  <g fill="cyan" onclick="setColor('cyan')">
  <rect x="60" y="40" width="20" height="15"/>
  <text x="70" y="62" font-size="8">cyan</text>
  </g>
</g>

<script type="text/javascript">
//要素の取得
var ball = document.getElementById("ball");

function setColor(color) {
  ball.setAttributeNS(null, "fill", color)
}
</script>

magenta cyan

まとめ

id名が付いている要素をgetElementByIdメソッドで取得します。取得した要素に対して属性値を変更しています。