【 d3.js】SVGでグラデーションを指定する方法　- linearGradient

SVGでグラデーションを指定する方法をご紹介していきます。

サンプルソース

<svg viewBox="0 0 400 400">
  <defs>
    <linearGradient id="gradient">
      <stop offset="5%"  stop-color="#fbc2eb" />
      <stop offset="95%" stop-color="#a6c1ee" />
    </linearGradient>
  </defs>
  <rect x="10" y="10" width="180" height="80" fill="url('#gradient')" />
</svg>

viewBox

viewBoxを指定すると、描画エリアのアスペクト比と要素の相対的なサイズを決定します。

<svg viewBox="x y width height">

属性	内容
x	左上からみたx座標
y	左上から見たy座標
width	描画エリアの幅(座標値)
height	描画エリアの高さ(座標値)

linearGradientでグラデーション指定

• linearGradient要素を defs 要素で囲い定義化し
• 付与したidをグラデーションを適用したい画像のfill属性へリンク

<defs>
  <linearGradient id="gradient">
    <stop offset="5%"  stop-color="#fbc2eb" />
    <stop offset="95%" stop-color="#a6c1ee" />
  </linearGradient>
</defs>

defsは、symbolなどの実際に描画しない図形の定義をまとめておく領域。

linearGradient要素で、塗りまたは線への線形グラデーションを定義します。
あとで呼び出せるように、id名をつけておきます。

グラデーション自体はstop要素で作成。以下の属性を指定します。

属性	内容
offset属性	左端を始点にどこの位置までグラデーションを適応するかを指定
stop-color 属性	始点からの変化する色を指定

指定したidを画像のfill属性へリンクすると、グラデーションが適用されます。

まとめ

以上、SVGでグラデーションを指定する方法でした。

関連情報