- 2008年7月15日 10:14
- Scale | Transform attribute | Translate
transform 属性は、translate, rotate, scale, skewX, skewY の5つのプロパティから構成されています。
translate(tx, ty) はIDのある xlink:href 属性によってリンクされたオブジェクトをX軸(tx)、Y軸(ty)に移動させます。
rotate(angle)は、オブジェクトを回転させます。(Chapter9-2, 9-3)
scale(sx,sy)は、オブジェクトの大きさ(X軸にsx 倍, Y軸にsy 倍)を変更します。(Chapter9-1, 9-3)
skewX(angle)は、オブジェクトをX軸の方向に設定された角度分歪みを加えます。(Chapter9-4)
skewY(angle)は、オブジェクトをY軸の方向に設定された角度分歪みを加えます。(Chapter9-4
matrixは、それらのプロパティ値を 3*3 マトリックスmatrix(a, b, c, d, e, f, 0, 0, 1) に纏めたものです。一番下の段に当たる 0, 0, 1 の部分はtransform 要素には関係ないので省略されます。SVGレンダラーは、transform 属性の各プロパティ (translate, rotate, scale, skewX, skewY) を1つの matrix に変換します。よって matrix プロパティを使うことでパフォーマンス的に有利になります。マトリックスは、Chapter 9 の最後の記事で説明します。
これは、scaleプロパティを使ったときのオブジェクトの位置を説明したものです。scale(0.5, 0.5)とした場合のX軸とY軸の値はオリジナルのオブジェクトの半分になります。 もし、オリジナルのオブジェクトの位置が、x="0" y="0" にある場合は位置は変わりません。
scale(0.5 0.5) ---> x="x * 0.5" y="y * 0.5"
W3Cで標準化されている要素、スタイル属性がサポートされているブラウザ、またはSVG Viewerプラグインをインストールしてください。
左の図形は、id="can" にリンクをさせてtransform="translate(50, 30)" ---> X軸に50px、Y軸に30px 移動させたものです。最初のrect 要素には、x="", y="" が設定されていませんので、x="0" y="0" となります。
2番目の図形は、transform="translate(200, 30) scale(1.5 0.5)" と、X軸に200、Y軸に30、幅(X軸に対する倍率）が1.5倍、高さ（Y軸に対する倍率）が0.5倍の大きさになっています。
3番目の図形は、2番目の図形(id="drum")にネストさせてます。
transform="translate(400,0) scale(0.20 0.75)"
transform="translate(400,168.75) scale(0.20 0.75)"
translate(400, 0)とX軸に400px移動させた位置で大きさを変更しています。もし先にscaleで大きさを変更したまま translate で移動させる場合は下のように書かなければいけません。
<use xlink:href="#drum" transform="scale(0.20 0.75) translate(2000,0)" />
<use xlink:href="#drum" transform="scale(0.20 0.75) translate(2000,225)" />
これは、scale(0.2 0.75) とX軸の幅を先に20% にした状態で移動させなければいけないのでX軸に5倍(0.2×5=1) の距離 ---> translate(2000,0) となります( 400 × 5 = 2000 ) ---> matrix 換算値
Y軸：Y軸に168.75移動した位置で0.75倍の高さ(Y軸）にするということは、
0.75倍の高さ(Y軸）した状態でY軸に225動かすと同じことになります。(168.75 × 4 ÷ 3 = 225)
基準となるオブジェクトの位置を、X=0, Y=0 の位置に設定すればその分簡単になります。
色の名称はこちらを参考：Name, Hex, RGB of Color
下のコードは上のSVGファイルのコードです。
