どうも!LSSです!!
この間、
でSVGで初めて絵を描いてみました。
…といっても「全面を水色で塗りつぶす四角」「赤い丸」「下部を黄緑で塗る四角」を配置しただけのシンプルな絵でしたね。
で。
SVGもCSSと同様に「グラデーション」を使う事ができます。
名前もよく似ています。
直線グラデーション
CSS「linear-gradient」 SVG「linearGradient」
円形グラデーション
CSS「radial-gradient」 SVG「radialGradient」
といった具合。
今回はその、SVGのグラデーション機能を試して「初めてのSVGお絵描き」をパワーアップさせてみます^^
- まず、以前描いた画像
- SVGグラデーションを用いたリメイク画像!
- SVGではグラデーションは定義しておいてから呼び出す
- 円形グラデーションの定義
- 直線グラデーションの定義
- 四角形を描画し、定義しておいたグラデーションで塗る
- そうしてできた画像がこちら!
- あとがき
まず、以前描いた画像
青空、お日様、草原!
…お日様が真っ赤(red)なのが嘘くさいですがw
SVGグラデーションを用いたリメイク画像!
コード
<p>[]
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="400">
<defs>
<radialgradient id="rg" cx="75%" cy="20%" r="20%">
<stop offset="30%" stop-color="white"></stop>
<stop offset="100%" stop-color="lightblue"></stop>
</radialgradient>
<lineargradient id="lg" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="lightgreen"></stop>
<stop offset="100%" stop-color="green"></stop>
</lineargradient>
</defs>
<rect x="0" y="0" width="300" height="400" fill="url(#rg)"></rect>
<rect x="0" y="300" width="300" height="100" fill="url(#lg)"></rect>
</svg>
[]</p>
SVGではグラデーションは定義しておいてから呼び出す
定義している部分のコード
<defs>
<radialgradient id="rg" cx="75%" cy="20%" r="20%">
<stop offset="30%" stop-color="white"></stop>
<stop offset="100%" stop-color="lightblue"></stop>
</radialgradient>
<lineargradient id="lg" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="lightgreen"></stop>
<stop offset="100%" stop-color="green"></stop>
</lineargradient>
</defs>
<defs>から</defs>までの内容は、「定義」するだけの部分となります。
予めここに、使いたいグラデーションの設定を書いておき、後から<defs>の外側に書いた図形コードで呼び出して、グラデーションで塗る、という感じですね。
で、円形グラデーションの設定に当たる部分は、
コード
<radialgradient id="rg" cx="75%" cy="20%" r="20%">
<stop offset="30%" stop-color="white"></stop>
<stop offset="100%" stop-color="lightblue"></stop>
</radialgradient>
この部分になります。
円形グラデーションの定義
<radialgradient id="rg" cx="75%" cy="20%" r="20%">
まず、円形グラデーションについて。
…手元の本には「radialGradient」とGだけ大文字で書く事になっていましたが、これがまた、はてなブログでは勝手に小文字に変更されてしまいます^^;
でも、小文字でもちゃんと表示されているようですねw
この一文は
「円形グラデーションを rg という名前で定義します。
円の中心となるのは、横位置が(全体の幅の)75%に当たる位置(左端を0%、右端を100%とした場合の)、縦位置が(全体の高さの)20%に当たる位置(上端を0%、下端を100%とした場合の)。
円の半径のサイズは全体の20%です。」
という意味の指定となります。
次の行、
<stop offset="30%" stop-color="white"></stop>
「グラデーションの30%の位置の色は白で。」
さらに次の行、
<stop offset="100%" stop-color="lightblue"></stop>
「グラデーションの100%の位置の色は水色で。」
…と、グラデーションの色を指定しており、こうしておくと、30%~100%の間が
「白から水色に徐々に変化するグラデーション」
となります。
この指定方法、書式(書き方)は違いますが、
考え方はCSSと全く同じですね!
直線グラデーションの定義
同様に、直線グラデーションについても
<lineargradient id="lg" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="lightgreen"></stop>
<stop offset="100%" stop-color="green"></stop>
</lineargradient>
の部分で定義しています。
SVGの直線グラデーションの場合、グラデーションの向かう方向を
x1="0%" y1="0%" x2="0%" y2="100%"
という形で指定します。
ここでいう x1,y1 が始点、 x2,y2 が終点で、始点から終点に向かう方向のグラデーション、という指定の仕方になります(この場合、真下に向かうグラデーションになります)。
ここは、CSSの時は角度で指定していたのでだいぶ違う書き方になりますね。
で、
<stop offset="0%" stop-color="lightgreen"></stop>
<stop offset="100%" stop-color="green"></stop>
薄い緑から普通の緑に変化するように指定しました。
四角形を描画し、定義しておいたグラデーションで塗る
のが、
<rect x="0" y="0" width="300" height="400" fill="url(#rg)"></rect>
<rect x="0" y="300" width="300" height="100" fill="url(#lg)"></rect>
この部分になります。
まず1行目のほうは、
<rect x="0" y="0" width="300" height="400" fill="url(#rg)"></rect>
「座標0,0(左上の角)から始まり、幅300、高さ400の四角形で、rgというidで定義した塗り方で塗りつぶす。」
という指定になります。
rgというidで定義したのは「白から水色に変化する円形グラデーション」なので、
「白い太陽と水色の空をひとつの四角形で描画」
する事になります^^
次の2行目は、
<rect x="0" y="300" width="300" height="100" fill="url(#lg)"></rect>
「座標0,300から始まり、幅300、高さ100の四角形で、lgというidで定義した塗り方で塗りつぶす。」
という指定になります。
lgというidで定義したのは「薄い緑から普通の緑に変化する下向きの直線グラデーション」なので、
「画像下部の草原を、上のほうは薄い緑、下にいくほど緑色が濃くなる四角形で描画」
する事になります。
そうしてできた画像がこちら!
上記のコードで描くとこうなります^^
前作に比べると、だいぶマシになりましたね!
…でも、よく見ると、少々太陽が縦に間延びしているような…。
これはもしかするとあれかな。
「300×400の四角形にグラデーションを当てた事で、縦が長い分のびてしまっている」のかも?
ちょっとだけ修正します。
ひとつめの四角形のrectタグの、heightの部分だけを、
<rect x="0" y="0" width="300" height="300" fill="url(#rg)"></rect>
と修正しました。
きれいな丸い太陽になりましたね^^
あとがき
SVGについてはまだまだ駆け出しもいいとこな自分ですが、やっぱりグラデーションを使うと一気に絵がかっこよくなりますね^^
まだまだSVGもできる事が色々残っていて、例えばクリッピング(切り抜き)だとか、アニメーションだとか。
画像の一部にリンクを仕込む、なんて事もできるそうなんですが、画像ファイルにしたSVGにもできるのか、こうしてHTML中にコードとして書いた場合だけなのか、も試してみたいですね。
ってなとこで、今回はこのへんで!
次回もまた、よろしくお願いします^^