Welcome

カキノタblog

自分の興味あるテーマを中心に、図解多めに記事を作成していきたいと思います。

基本図形 SVGで平行四辺形を描く

SVGで簡単に平行四辺形を描く方法です。

SVGで平行四辺形を描く_skewX

skewを使う場合

ソースコード

<svg width="300" height="200" viewBox="-5 -5 10 10">
 
  <rect fill-opacity="0.8" x="-5" y="-3" width="10" height="6" fill="red" transform="skewX(-30)" />

</svg>

説明

skewX(α)
skewY(α)

skewは図形をα度傾斜変換する関数です。skewXは所与の角度だけX軸不変の2D傾斜を行います。α分だけY軸が傾くようにX座標をY座標に比例する量だけずらします（skew）。

引数に30を設定すると30度、-30では逆方向に30度傾斜変換されます。

skewYはY軸方向にずらします。

SVGで平行四辺形を描く_skewY

参考リンク