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を貼っておく。

 

こちらの記事もどうぞ

.
スポンサーリンク

商用利用可な素材配布しています!!

商用利用可なフリー素材ULOCO商用利用可なフリー素材ULOCO