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

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

 メニュー

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

Hello!

テキストの取得

テキストオブジェクトの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>

Hello!

テキストの設定

テキストオブジェクトの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>

default

まとめ

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