在SVG中,你可以使用径向渐变(radial gradient)来创建放射性渐变效果。以下是一个简单的SVG代码示例,演示如何在一个圆形上应用径向渐变:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 创建一个圆形并应用径向渐变 -->
  <circle cx="100" cy="100" r="75" fill="url(#radialGradient)" />

  <!-- 定义径向渐变 -->
  <radialGradient id="radialGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
    <stop offset="0%" style="stop-color:#3498db; stop-opacity:1" />
    <stop offset="100%" style="stop-color:#e74c3c; stop-opacity:1" />
  </radialGradient>
</svg>

在上面的示例中,我们创建了一个圆形,并通过fill属性使用了名为"radialGradient"的径向渐变。径向渐变通过<radialGradient>元素定义,其中id属性为渐变定义一个唯一的标识符,而cx, cy, r属性则分别确定了渐变的中心点和半径,fx和fy属性分别指定了焦点的位置。

在<radialGradient>元素内部,我们同样使用了两个<stop>元素定义了渐变的起始颜色和结束颜色,通过offset属性来确定颜色的位置。在这个例子中,起始颜色是蓝色(#3498db),结束颜色是红色(#e74c3c)。

你可以根据需要调整圆形的位置、半径、渐变的中心点和半径,以及颜色的位置和数量来满足你的设计需求。


转载请注明出处:http://www.zyzy.cn/article/detail/14681/SVG