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

使用可能な場所

カテゴリーグラデーション要素
許可された内容任意の数、任意の順で以下の要素を配置可能:
説明的要素
<animate><animateTransform><set><stop>

属性

グローバル属性

専用属性

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> の定義
勧告 初期定義

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Edge Firefox (Gecko) IE Opera Safari
基本サポート 1.0 (有) 1.5 (1.8) 9.0 9.0 3.0.4[1]
機能 Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート 3.0 (有) 1.0 (1.8) 未サポート (有) 3.0.4[1]

Compatibility sources に基づく。

WebKit向けノート

[1] WebKitでは color-interpolation はサポートされておりません。(bug 6034)

関連情報

ドキュメントのタグと貢献者

このページの貢献者: liang664, Sebastianz, teoli, manzyun
最終更新者: liang664,