SVG サンプル: skewY()
<g> 全体
skewY() なし
skewY(15)
一部 (<rect>) のみ
skewY() なし
skewY(15)
座標計算
(
x
newCoordSys
y
newCoordSys
1
)
=
(
1
0
0
tan
(
a
)
1
0
0
0
1
)
(
x
prevCoordSys
y
prevCoordSys
1
)
=
(
1
x
prevCoordSys
+
0
y
prevCoordSys
+
0
tan
(
a
)
x
prevCoordSys
+
1
y
prevCoordSys
+
0
1
)
のため、例えば サンプルの右下の点 (310, 210) は skewY(15) とすると下記の座標になります。
x prevCoordSys
= 310
y prevCoordSys
= 210
x newCoordSys
= 1 * 310 + 0 * 210 + 0 =
310
y newCoordSys
= tan(15deg) * 310 + 1 * 210 + 0 =
293.06424965364806
(横幅×tan(Θ)で傾斜させた空白の三角形エリア分の高さを算出し、元の高さに追加しているイメージ)