radialGradient

radialGradient要素はグラフィックス要素の塗りまたは線への放射状グラデーションを定義します。

使用可能な場所

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

属性

グローバル属性

専用属性

DOM インターフェース

この要素は SVGRadialGradientElement インターフェースを提供します。

SVG

<svg width="120" height="120" viewBox="0 0 120 120"
   xmlns="http://www.w3.org/2000/svg">

  <defs>
    <radialGradient id="exampleGradient">
      <stop offset="10%" stop-color="gold"/>
      <stop offset="95%" stop-color="green"/>
    </radialGradient>
  </defs>

  <circle fill="url(#exampleGradient)" cx="60" cy="60" r="50"/>
</svg>

結果

仕様

Specification Status Comment
Scalable Vector Graphics (SVG) 2
<radialGradient> の定義
勧告候補 fr 属性の追加
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
<radialGradient> の定義
勧告 初期定義

ブラウザ実装状況

BCD tables only load in the browser

関連情報