傾き(skewX, skewY)

図形を3次元風に傾けるときには、skewX や skewY を使う。
skewX は x 軸を中心軸として、y 軸からの傾きを指定する。
skewY は y 軸を中心軸として、x 軸からの傾きを指定する。
若干ややこしいが、具体例をみていくとわかるだろう。
<use xlink:href="#pc" transform="skewY(30)" />
<use xlink:href="#pc" transform="skewX(30)" />
skewX の場合は、x 方向の長さを一定にして傾ける。 skewY の場合は、y 方向の長さを一定にして傾ける、という具合になる。

まとめ

座標変換(transform)の場合には、transform 属性に各種パラメータを指定する。
若干、操作がややこしいが、適当にグループ化(g)することによって変換は楽になるだろう。
要素(element) 主な属性(attribute) 属性の値
座標変換(transform) 移動(translate) x方向, y方向の移動
回転(rotate) 角度, 中心のx座標, 中心のy座標
拡大縮小(scale) x拡大率, y拡大率
傾き(skewX, skewY) 角度

previous
copyleft by marenijr