<radialGradient>

<radialGradient> 元素允許作者定義徑向漸變，可以將其應用於圖形元素的填充或描邊。

注意：不要與 CSS radial-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> ; 預設值：與 cx 相同；可動畫：是
fy: 此屬性定義徑向漸變開始圓的 y 座標。值型別：<length> ; 預設值：與 cy 相同；可動畫：是
gradientUnits: 此屬性定義 cx、cy、r、fx、fy、fr 屬性的座標系。值型別：userSpaceOnUse|objectBoundingBox ; 預設值：objectBoundingBox; 可動畫：是
gradientTransform: 此屬性為漸變座標系提供額外的變換。值型別：<transform-list> ; 預設值：恆等變換；可動畫：是
href: 此屬性定義對另一個 <radialGradient> 元素的引用，該元素將用作模板。值型別：<URL> ; 預設值：無；可動畫：是
r: 此屬性定義徑向漸變結束圓的半徑。漸變將繪製成 100% <stop> 對映到結束圓的周長。值型別：<length> ; 預設值：50%; 可動畫：是
擴充套件方法: 此屬性指示如果漸變開始或結束在包含漸變的形狀的邊界內，則漸變的行為。值型別：pad|reflect|repeat ; 預設值：pad; 可動畫：是
xlink:href 已棄用: 對另一個 <radialGradient> 元素的 <IRI> 引用，該元素將用作模板。值型別：<IRI> ; 預設值：無；可動畫：是

使用上下文

類別	漸變元素
允許內容	以下元素的任意數量，按任意順序描述性元素 `<animate>`、`<animateTransform>`、`<set>`、`<stop>`

規範

規範
可縮放向量圖形 (SVG) 2 # 徑向漸變

瀏覽器相容性

BCD 表格僅在瀏覽器中載入