--- title: radialGradient slug: Web/SVG/Element/radialGradient tags: - SVG - SVG渐变 - 元素 translation_of: Web/SVG/Element/radialGradient ---
{{SVGRef}}

radialGradient 用来定义径向渐变，以对图形元素进行填充或描边。

用法

{{svginfo}}

属性

全局属性

专有属性

DOM 接口

该元素实现了 {{domxref("SVGRadialGradientElement")}} 接口。

示例

SVG

<svg width="120" height="120" viewBox="0 0 240 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>
    <radialGradient spreadMethod="reflect"
                    cx="50%"
                    cy="50%"
                    r="50%"
                    fx="25%"
                    fy="75%"
                    fr="10%"
                   id="flameGradient">
      <stop offset="0%" stop-color="white"/>
      <stop offset="10%" stop-color="yellow"/>
      <stop offset="95%" stop-color="red"/>
    </radialGradient>
  </defs>
  <circle fill="url(#exampleGradient)" cx="60" cy="60" r="50"/>
  <circle fill="url(#flameGradient)" cx="180" cy="60" r="50"/>
</svg>

结果

{{EmbedLiveSample("Example", 120, 120)}}

技术参数

技术参数 状态 注释
{{SpecName('SVG2', 'pservers.html#RadialGradients', '<radialGradient>')}} {{Spec2('SVG2')}} 加入 fr 属性
{{SpecName('SVG1.1', 'pservers.html#RadialGradients', '<radialGradient>')}} {{Spec2('SVG1.1')}} 初始定义

浏览器兼容性

{{Compat("svg.elements.radialGradient")}}

相关内容