こんにちは、CryptoGamesの高橋です。

クリスペの会社です。

本日はSVGの図形の変更方法とグラデーションについて学んでいきます。

なお、第一弾はこちらをご参照ください。

また、こちらの素晴らしい記事を大いに参考にしました。よかったら元のページも見てみてください。

１ 図形の変形について（trnasform属性）

まずはtransform属性です。

下の画像を見てください。

このように反転した画像を作ってみたり、ランダムで太陽の位置を動かしたりすることができるようになります。

では、見ていきましょう。

１ー０ 概要

まず、transformで座標軸を動かすことを**「アフィン変換」**というようです。

そして、上のようにいくつかの関数が用意されています。

今回はこのうち、次の４つを扱います。

① 移動 ⇨ translate② 拡大・縮小・反転 ⇨ scale③ 回転 ⇨ rotate④ 傾斜 ⇨ skewX skewY

１ー１ 移動（translate）

ランダム数を組み合わせることにより、場所を変えることができます。

ポイント① 書き方 trasform="translate(30, 40)"② 図形を（30,40）方向に移動させる

１ー２ 拡大・縮小・反転（scale）