SVG:グラデーション系の要素

ウオトミズ(UOTOMIZU)の中の人

SVGのグラデーション系の3つの要素についてまとめた。

SVGのグラデーション

SVGのグラデーションについてはAdobe Illustratorなどの専用のツールを使えば良いので、覚える必要はないだろうけど、それぞれどのように動いているか知っていた方がコードを扱いやすい(はず)。

SVGのグラデーションの要素は3つある。

  1. <linearGradient>
  2. <radialGradient>
  3. <meshGtadient>

この3つのうち<meshGradient>では、より複雑なグラデーションを作成することができるが、ここでは割愛する。

 

<linearGradient>要素

linear-gradientの画像

index.html


<svg id="linear">
  <defs>
    <linearGradient id="linearGradient"
            x1="-9.41" y1="16.31"
            x2="313.41" y2="202.69"
            gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="aqua"/>
      <stop offset="1" stop-color="#0071bc"/>
    </linearGradient>
   </defs>
  <rect fill="url(#linearGradient)" width="304" height="219"/>
</svg>
  • <linearGradient>要素内にグラデーションを記述。
  • fill属性で<linearGradient>を指定。

 

<radicalGradient>要素

radical-gradientの画像

index.html


<svg id="radial">
  <defs>
    <radialGradient id="radialGradient"
            cx="199.5" cy="70"
            r="132.47"
            gradientTransform="translate(-47.5 0.3) scale(1 1)"
            gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="aqua"/>
      <stop offset="1" stop-color="#0071bc"/>
    </radialGradient>
  </defs>
  <rect fill="url(#radialGradient)" width="304" height="219"/>
</svg>
  • <radialGradient>要素内にグラデーションを記述。
  • fill属性で<radialGradient>を指定。

 

おわりに

参考までに、CodePenを貼っておく。

 

こちらの記事もどうぞ

.

スポンサーリンク


Fatal error: Uncaught Error: Call to undefined function is_mobile() in /home/ykplay/uotomizu.com/public_html/a/wp-content/themes/atelier/piece-ads.php:11 Stack trace: #0 /home/ykplay/uotomizu.com/public_html/a/wp-includes/template.php(724): require() #1 /home/ykplay/uotomizu.com/public_html/a/wp-includes/template.php(671): load_template('/home/ykplay/uo...', false) #2 /home/ykplay/uotomizu.com/public_html/a/wp-includes/general-template.php(168): locate_template(Array, true, false) #3 /home/ykplay/uotomizu.com/public_html/a/wp-content/themes/atelier/single-article.php(33): get_template_part('piece', 'ads') #4 /home/ykplay/uotomizu.com/public_html/a/wp-includes/template.php(724): require('/home/ykplay/uo...') #5 /home/ykplay/uotomizu.com/public_html/a/wp-includes/template.php(671): load_template('/home/ykplay/uo...', false) #6 /home/ykplay/uotomizu.com/public_html/a/wp-includes/general-template.php(168): locate_template(Array, true, false) #7 /home/ykplay/uotomizu.com/public_html/a/wp-content/themes/atelier/single.php(7): g in /home/ykplay/uotomizu.com/public_html/a/wp-content/themes/atelier/piece-ads.php on line 11