SVGエッセンシャルズ 第2版

14章SVG DOMの使用

「13章 対話性」のスクリプトの例で使用していたメソッドとプロパティ——要素の作成と選択、スタイルや属性の取得と設定など——は、DOM（Document Object Model：文書オブジェクトモデル）の仕様の一部であり、SVG独自のものではありません。SVG 1.1の仕様では、SVGの二次元グラフィカルレイアウトを容易に扱えるようにするための追加のメソッドが数多く定義されています。これらのメソッドを使うと、テキスト要素やパス要素がどこに描画されたかを正確に把握したり、アニメーション要素のタイミングを制御したり、異なる座標系の間で変換を行ったりすることができます。

14.1　要素の属性値の判別

「13.4 SVGでのスクリプト」では、getAttributeとsetAttributeを使って、要素の属性にアクセスしました。これらのメソッドは、属性を単純な文字列として扱います。それらが何を表しているかについては気にしません。width="10em"の要素とwidth="100px"の要素について幅の違いを計算しなければならないとすると、それらの文字列から数値を抜き出し、フォントサイズを調べ、それらの大きさを変換する必要があるでしょう。

作業を簡単にするために、SVGの要素オブジェクトは、その要素型にとって鍵となる属性を表すプロパティを備えています。SVGコード内の<circle>を表すSVGCircleElementオブジェクトは、cx、cy、rというプロパティを持ちます。SVGRectElement（マークアップでの<rect>）は、x、y、width、heightというプロパティを持ちます。

ただし、これらのプロパティは、単純な数値を保持していません。それぞれのプロパティは、ほとんどの場合、 ...