SVG 中使用 <radialGradient> 元素来创建放射性渐变。以下是一个简单的例子,演示如何在一个圆形元素上应用放射性渐变:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 创建一个放射性渐变 -->
  <radialGradient id="radialGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
    <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
    <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
  </radialGradient>

  <!-- 在圆形元素上应用放射性渐变 -->
  <circle cx="100" cy="100" r="80" fill="url(#radialGradient)" />
</svg>

在这个例子中,<radialGradient> 元素定义了一个名为 "radialGradient" 的放射性渐变。cx, cy, r 属性表示渐变的圆心和半径,fx 和 fy 属性表示渐变焦点的位置。

然后,圆形元素 <circle> 使用 fill 属性引用了这个放射性渐变,从而在圆形上应用了从黄色到红色的放射性渐变。

你可以根据需要调整 <radialGradient> 和 <stop> 元素的属性来定义不同位置和颜色的放射性渐变。


转载请注明出处:http://www.pingtaimeng.com/article/detail/12391/SVG