<radialGradient>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

<radialGradient> 要素は、グラフィック要素の塗りつぶしや線の描画に適用できる放射状のグラデーションを定義することができます。

メモ: CSS の gradient() と混同しないでください。 CSS のグラデーションは HTML 要素に対してのみ適用することができるのに対し、 SVG のグラデーションは SVG 要素にのみ適用できます。

例

html,
body,
svg {
  height: 100%;
}

html

<svg
  viewBox="0 0 10 10"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <radialGradient id="myGradient">
      <stop offset="10%" stop-color="gold" />
      <stop offset="95%" stop-color="red" />
    </radialGradient>
  </defs>

  <!-- using my radial gradient -->
  <circle cx="5" cy="5" r="4" fill="url('#myGradient')" />
</svg>

属性

cx: この属性は、放射グラデーションの終了円の x 座標を定義します。 値の型: <length> ; 既定値: 50%; アニメーション: 可
cy: この属性は、放射グラデーションの終了円の y 座標を定義します。 値の型: <length> ; 既定値: 50%; アニメーション: 可
fr: この属性は、放射グラデーションの開始円の半径を定義します。グラデーションは、 0% の<stop>が開始円の外周にマッピングされるように描画されます。 値の型: <length> ; 既定値: 0%; アニメーション: 可
fx: この属性は、放射グラデーションの開始円の x 座標を定義します。 値の型: <length> ; 既定値: Same as cx; アニメーション: 可
fy: この属性は、放射グラデーションの開始円の y 座標を定義します。 値の型: <length> ; 既定値: Same as cy; アニメーション: 可
gradientUnits: この属性は、 cx, cy, r, fx, fy, fr の各属性の座標系を定義します。 値の型: userSpaceOnUse|objectBoundingBox ; 既定値: objectBoundingBox; アニメーション: 可
gradientTransform: この属性は、グラデーションの座標系に対するさらなる座標変換を提供します。 値の型: <transform-list> ; 既定値: identity transform; アニメーション: 可
href: この属性は、テンプレートとして使用される他の <radialGradient> 要素への参照を定義します。 値の型: <URL> ; 既定値: none; アニメーション: 可
r: この属性は、放射状グラデーションの終了円の半径を定義します。グラデーションは、100% の<stop> が終了円の周囲にマッピングされるように描画されます。 値の型: <length> ; 既定値: 50%; アニメーション: 可
spreadMethod: この属性は、グラデーションが、グラデーションを含むシェイプの境界の内側で開始または終了した場合の動作を示すものです。 値の型: pad|reflect|repeat ; 既定値: pad; アニメーション: 可
xlink:href: 非推奨;: この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。
<IRI> の参照で、テンプレートとして使用される他の <radialGradient> 要素を差します。 値の型: <IRI> ; 既定値: none; アニメーション: 可

グローバル属性

コア属性: 特に: id
スタイル属性: class, style
イベント属性: グローバルイベント属性, 文書要素イベント属性
プレゼンテーション属性: 特に: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility
XLink 属性: xlink:href, xlink:title

使用メモ

カテゴリー	グラデーション要素
許可されている内容	任意の数、任意の順序の以下の要素。説明的要素 `<animate>`、`<animateTransform>`、`<script>`、`<set>`、`<stop>`、`<style>`

仕様書

Specification
Scalable Vector Graphics (SVG) 2 # RadialGradientElement

ブラウザーの互換性

BCD tables only load in the browser