SVG 径向渐变

SVG 渐变 - 径向渐变

SVG 径向渐变 -

<radialGradient> 元素用于定义径向渐变填充或描边。径向渐变从中心焦点向外过渡颜色到外圆的边缘。

<radialGradient> 元素必须嵌套在 <defs> (定义) 标签内。<defs> 标签是可重用图形对象的容器，例如渐变、图案和滤镜。这些定义不直接渲染，但可以被其他元素引用。

示例 1: 基本径向渐变

此示例定义了一个椭圆，填充了一个径向渐变，颜色从中心的透明白色过渡到边缘的不透明蓝色。

抱歉，您的浏览器不支持内联 SVG。

以下是 SVG 代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SVG Radial Gradient Example 1</title>
</head>
<body>
  <svg width="500" height="150">
    <defs>
      <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
        <stop offset="0%" style="stop-color:white; stop-opacity:0" />
        <stop offset="100%" style="stop-color:blue; stop-opacity:1" />
      </radialGradient>
    </defs>
    <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  </svg>
</body>
</html>

代码解释：

• <defs>: 包含渐变定义。
• <radialGradient id=“grad1”>: 定义径向渐变并为其分配一个唯一 ID，“grad1”，以便可以引用它。
• cx, cy, r: 这些属性定义了径向渐变的外圆。cx 和 cy 是中心坐标，r 是半径。值可以是百分比（相对于对象的边界框）或绝对数值。
• fx, fy: 这些属性定义了径变焦点的坐标（映射 0% 色标的位置）。如果省略，它们默认为 cx 和 cy 的值。
• <stop>: 定义渐变中的一个颜色停止点 (色标)。它有一个 offset 属性（0% 到 100%，或 0 到 1），指示颜色沿渐变矢量定位的位置。
• style=“stop-color:white; stop-opacity:0”: 指定该色标处的颜色和不透明度。或者，stop-color 和 stop-opacity 可以用作单独的属性。
• fill=“url(#grad1)”: <ellipse> 元素上的 fill 属性使用其 ID 将其链接到渐变定义。

示例 2: 带有偏移焦点的径向渐变

此示例演示了改变 cx、cy 和 r 属性，或偏移焦点（fx、fy），如何影响渐变的外观。在这里，调整了渐变的外圆和焦点。

抱歉，您的浏览器不支持内联 SVG。

以下是 SVG 代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SVG Radial Gradient Example 2</title>
</head>
<body>
  <svg width="500" height="150">
    <defs>
      <radialGradient id="grad2" cx="20%" cy="30%" r="30%" fx="50%" fy="50%">
        <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
        <stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:1" />
      </radialGradient>
    </defs>
    <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
  </svg>
</body>
</html>

要点: 径向渐变提供了一种强大的方式来在 SVG 中创建深度和逼真的光照效果。尝试使用不同的色标颜色、不透明度和坐标属性（cx、cy、r、fx、fy）来实现各种视觉效果。

对于更高级的渐变控制，可以探索诸如 gradientUnits（userSpaceOnUse 或 objectBoundingBox）和 spreadMethod（pad、reflect、repeat）等属性。