【SVG】テキストオブジェクト

テキストオブジェクトの取得、テキストの取得・設定についてご紹介します。テキストオブジェクトを取得した後、テキストを操作していきます。予め設定してあるテキストをイベントを介して変更してみます。詳細は、サンプルコードをご確認ください。

テキストオブジェクトの取得

text要素からテキストオブジェクトを取得する。

文字列をクリックするとコンソールにテキストオブジェクトが表示される。

<text x="10" y="36" font-size="24" font-family="serif" fill="green" onclick="showFirstChild(evt)">Hello!</text>

<script type="text/javascript">
function showFirstChild(evt) {
  //テキスト要素の最初の子要素(テキストオブジェクト)を取得する
  console.log(evt.target.firstChild);
}
</script>

テキストの取得

テキストオブジェクトのdataプロパティに、テキストが設定されている。

文字列をクリックするとコンソールに文字列が表示される。

<text x="10" y="36" font-size="24" font-family="serif" fill="green" onclick="showFirstChild(evt)">Hello!</text>

<script type="text/javascript">
function showFirstChild(evt) {
  //テキストの値を取得する
  console.log(evt.target.firstChild.data);
}
</script>

テキストの設定

テキストオブジェクトのdataプロパティに、テキストを設定する。

テキストをクリックするとダイアログボックスが表示される。そこに新しいテキストを入力すると、文字列が新しいテキストに変わる。

<text x="10" y="36" font-size="24" fill="blue" onclick="setText(evt)">default</text>
<script type="text/javascript">
function setText(evt) {
  var text = evt.target.firstChild;
  text.data = prompt("新しいテキストを入力する: ", text.data);
}
</script>

まとめ

テキストオブジェクトを取得して、テキストの取得と設定をしました。