externalResourcesRequired

Scalable Vector Graphics等,不定期

ref()

2006-11-14 | 仕様
ref()は、svg要素のビューボックスをビューポートにあてはめる変換と追加の移動を適用することを指定します。
transform属性の値になります。

refは、ref(svg, x, y)のようにパラメータとして最大3つの値を指定します。
svgは決められた値です。xがsvg要素の座標系でのx軸方向の移動量、yがy軸方向の移動量になります。
それぞれのパラメータの間は、カンマ(",")あるいは、半角スペース等(半角スペース以外にはタブや改行が該当します。文字コードで、#x20、#x9、#xD、#xAの4つ。)で区切ります。

元の座標系での(x,y)と新しい座標系での(x,y)は次のような関係になります。
新しい座標系でのx = 元の座標系でのx + xに、svg要素のビューボックスをビューポートにあてはめる変換を適用したもの
新しい座標系でのy = 元の座標系でのy + yに、svg要素のビューボックスをビューポートにあてはめる変換を適用したもの

新しい座標系は、ビューポートの座標系になります。すなわち、新しい座標系での(x,y)は表示領域内の位置を表します。

例えば、
<svg width="200" height="200" viewBox="0 0 100 100">
<g transform="ref(svg, 50, 50)">
</g>
</svg>
のように書けば、
ビューボックスは(0,0)を左上の頂点とする幅および高さが100の矩形領域、ビューポートは幅および高さが200の矩形領域であり、
ビューボックスをビューポートにあてはめる変換は2倍に拡大する変換となり、
新しい座標系でのx = 2 * (元の座標系でのx + 50)
新しい座標系でのy = 2 * (元の座標系でのy + 50)
のようになり、元の座標系での(0,0)は新しい座標系の(100,100)になります。

パラメータが1つしか指定されない場合は、xおよびyが指定されないものとして扱われます。

例えば、
<svg width="200" height="200" viewBox="0 0 100 100">
<g transform="ref(svg)">
</g>
</svg>
のように書けば、
新しい座標系でのx = 2 * 元の座標系でのx
新しい座標系でのy = 2 * 元の座標系でのy
のようになり、元の座標系での(50,50)は新しい座標系の(100,100)になります。

ref()は、移動、拡大/縮小、回転操作による位置の変化の影響を受けますが、図形が拡大/縮小、回転することはありません。
したがって、同じ大きさ、同じ向きで表示されつづけることになります。
パラメータが1つしか指定されない場合は、移動、拡大/縮小、回転操作の影響を受けません。
したがって、同じ位置に表示されつづけることになります。
(初期表示において3pxで表示された文字列は拡大しても3pxのままです。多分読めません。便利な変換だとは思いますが。)