【保存版】SVG徹底解説！②（図形の変形とグラデーション）
こんにちは、CryptoGamesの高橋です。
クリスペの会社です。
本日はSVGの図形の変更方法とグラデーションについて学んでいきます。
なお、第一弾はこちらをご参照ください。
また、こちらの素晴らしい記事を大いに参考にしました。よかったら元のページも見てみてください。
１ 図形の変形について（trnasform属性）
まずはtransform属性です。
下の画像を見てください。
このように反転した画像を作ってみたり、ランダムで太陽の位置を動かしたりすることができるようになります。
では、見ていきましょう。
１ー０ 概要
まず、transformで座標軸を動かすことを「アフィン変換」というようです。
そして、上のようにいくつかの関数が用意されています。
今回はこのうち、次の４つを扱います。
① 移動 ⇨ translate
② 拡大・縮小・反転 ⇨ scale
③ 回転 ⇨ rotate
④ 傾斜 ⇨ skewX skewY
１ー１ 移動（translate）
ランダム数を組み合わせることにより、場所を変えることができます。
ポイント
① 書き方 trasform="translate(30, 40)"
② 図形を（30,40）方向に移動させる
１ー２ 拡大・縮小・反転（scale）
ランダム数を組み合わせることで、反転までできてしまいます。
ポイント
① 書き方は transform="scale(2,3)"
② X方向に２倍、Y方向に３倍となる。
③ 引数が一つの場合(scale(2)など) ⇨ X,Yともに２倍になる
１ー３ 回転（rotate）
こちらで回転ができます。
１ー４ 傾斜（skewX skewY）
私はまだ、これをどう使うのかがイメージできていませんが、傾けるようですね。
２ グラデーション
２ー０ 概要
グラデーションには３種類があり
① 帯状 linerGradient
② 放射状 radialGradient
③ 不定形 meshGradient
があります。
ポイントはグラデーションにIDをつけ、外からurl(#)により、IDを使って呼び出すことだと思います。
２ー１ gradientUnits（どこにグラデーションを設置するか）
ここがグラデーションの一つの山だと思います。
グラデーションをどこに設置するかという話です。
まずは、２つの種類があります。
gradientUnits
① キャンバス全体 ⇨ userSpaceOnUse
② 指定した図形の中 ⇨ objectBoundingBox
上の二つの点線で囲まれた図形のうち、
① 上（userSpaceOnUse） ⇨ 周りと馴染んでいる
② 下（objectBoundingBox） ⇨ 独自のグラデーション
２ー２ 勾配ベクトル
どこから何色で切り替わるのかを示すのが勾配ベクトル
① offset → ％、もしくは「0 ~1」で開始位置を設定
② color → 色
③ opacity → 色の元の色としての透明度
２ー３ 敷詰め方法（繰り返し）
グラデーションを１度だけか、もしくは繰り返すのかの設定が「spreadMethod」です。
① １度だけ ⇨ pad
② 単純な繰り返し ⇨ repeat
③ 反射繰り返し ⇨ reflect
③について、上手い表現が見つからないですが、見ていただけるとわかると思います。
今回は全て幅50です。repeatは50の幅が終わると、再び同じグラデーションを描いています。
一方、relfectの場合は画像の75の位置から、さらに50かけて元の色に戻っています。
結果として、元に戻るまでの幅100（50+50）で繰り返しを行っています。
２ー４ グラデーションの変形
右下の画像のように、簡単にグラデーションの位置を変えることができます。
「rotate」は回転なので、45度回転してグラデーションができています。
２ー５ グラデーションの代替
グラデーションが正しく反映されなかった時に備えて、代替の色を設定しています。
２ー６ 理解度チェック（userSpaceOnUse）
では具体的に見てみましょう。
ここがおそらく頑張りどころです。まず、この３つは全て
gradientUnits="userSpaceonUse"です。
つまり、キャンバスそのものにグラデーションを描き、その後にただ図形をはめ込むだけです。
一番上は（0,0）から(50,50)までグラデーションを適用し、それで終わっています。
なので、(10,10)から幅180、高さ60を切り取ってはいますが(50,50)以降はそもそもグラデーションが終了しているため、白になります。
一方、２番目は（0,0）から(50,50)のグラデーションを繰り返しています。そして、その繰り返しているところに図形をはめ込んでいますので、最後までグラデーションになっています。
２ー７ 理解度チェック（objectBoundingBox）
さて、次はobjectBoundingBoxです。
こちらは、図形そのものにグラデーションを適用する考えでしたね。
見てみると、X,Yが50％のところまでをグラデーションにして、repeatで繰り返しています。
図形の中で完結するので、グラデーションが最初から始まっていますね。
２ー８ 放射型グラデーションについて
次は放射型グラデーションのradicalGradientについてです。
ただ、「焦点」以外はあまり変わらないかもしれません。
早速やってみましょう。
２−９ userSpaceOnUseの場合
キャンバス自体にグラデーションがかかるのでしたね。
それさえわかれば、考え方はlinerGradientと同じです。
２ー１０ objectBoundingBoxの場合
こちらは、中心、半径がないのがデフォルトで設定されているのが特徴です。
その図形内でグラデーションが完結するため、図形の中心から始まり、offsetの％の位置でどのようになるかが決定します。
２ー１１ 焦点の設定について
焦点を設定することで、グラデーションが変わります。
形としては「中心」をもとに作られますが、グラデーションは「焦点」を元に作られます。
２ー１２ 境界線の設定について
下のように、同じ％で違う色を指定すると、境界線になる。
以上です。
ぜひ、やってみてください。
私も頑張ってみようと思います。
サポートをしていただけたらすごく嬉しいです😄 いただけたサポートを励みに、これからもコツコツ頑張っていきます😊