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

まとめ

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