SVG 径向渐变 - 移动焦点（中心）

Question

我现在正在学习 SVG，并陷入了径向渐变主题，即精确移动径向渐变中心。比方说，我有 2 个渐变示例（可供使用的 codepen 片段）。一个基本的（完美运行）：

    <svg xmlns="http://www.w3.org/2000/svg" xml:lang="en"xmlns:xlink="http://www.w3.org/1999/xlink"width="200px" height="200px" viewBox="0 0 200 200">
       <title>Bulls-eye Repeating Radial Gradient</title>
       <radialGradient id="bullseye"cx="50%" cy="50%" r="10%" spreadMethod="repeat">
         <stop stop-color="tomato" offset="50%"/>
         <stop stop-color="#222" offset="50%"/>
      </radialGradient>
      <rect width="100%" height="100%" rx="10%"fill="url(#bullseye)"/>
    </svg>

fx以及我尝试应用和fy属性来移动渐变焦点的示例：

<svg xmlns="http://www.w3.org/2000/svg" xml:lang="en"xmlns:xlink="http://www.w3.org/1999/xlink"width="200px" height="200px" viewBox="0 0 200 200">
   <title>Bulls-eye Repeating Radial Gradient</title>
   <radialGradient id="bullseye2" cx="50%" cy="50%" r="10%" fx=".2" fy=".2"  spreadMethod="repeat">
     <stop stop-color="tomato" offset="50%"/>
     <stop stop-color="#222" offset="50%"/>
  </radialGradient>
  <rect width="100%" height="100%" rx="10%"fill="url(#bullseye2)"/>
</svg>

在这里，它以某种方式只是切割了一块形状，而不是仅仅移动中心点。

您能否解释一下我在这里做错了什么以及为什么它以如此奇怪的方式工作？

Answer 1

定义径向渐变时有两个主要概念：

• 渐变开始的点（“焦点”）
• 定义渐变“外部”形状的椭圆

稍后我将提到“重复”选项，但现在：渐变从焦点向外渲染，直到到达外部形状。也许想象一下外部形状不断缩小直到到达焦点会有所帮助。

这意味着如果焦点位于定义的形状内部，它将显得相当直观：

<svg viewBox="0 0 120 120" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="Gradient" cx="0.5" cy="0.5" r="0.5"
        fx="0.35" fy="0.35">
      <stop offset="0%" stop-color="red"/>
      <stop offset="100%" stop-color="blue"/>
    </radialGradient>
  </defs>
 
  <rect x="10" y="10" width="100" height="100"
      fill="url(#Gradient)" />

  <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="1"/>
  <circle cx="45" cy="45" r="2" fill="white" stroke="white"/>
  <circle cx="60" cy="60" r="2" fill="white" stroke="white"/>
  <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text>
  <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text>
</svg>

（示例取自MDN，稍作修复和调整）

但是，如果焦点位于边界形状之外，您最终会得到更像圆锥体的东西：

<svg viewBox="0 0 120 120" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="Gradient" cx="0.5" cy="0.5" r="0.5"
        fx="0.05" fy="0.05">
      <stop offset="0%" stop-color="red"/>
      <stop offset="100%" stop-color="blue"/>
    </radialGradient>
  </defs>
 
  <rect x="10" y="10" width="100" height="100"
      fill="url(#Gradient)" />

  <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="1"/>
  <circle cx="15" cy="15" r="2" fill="white" stroke="white"/>
  <circle cx="60" cy="60" r="2" fill="white" stroke="white"/>
  <text x="28" y="30" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text>
  <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text>
</svg>

请注意，它仍然采用圆并将其向焦点“收缩”，但由于焦点现在位于圆之外，因此它无法为圆锥体之外的点定义任何有意义的颜色。

fx您可以使用和移动焦点fy。还有一个fr有时很有用但暂时忽略它；无论如何，您可以对颜色停止位置执行相同的操作。

cx您可以使用、cy和移动圆圈r。

移动两者只会产生平移渐变的效果。

重复会让这变得更加混乱，但也许这个演示会澄清：

<svg viewBox="0 0 120 120" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="Gradient" cx="0.5" cy="0.5" r="0.3"
        fx="0.4" fy="0.4" spreadMethod="repeat">
      <stop offset="0%" stop-color="red"/>
      <stop offset="100%" stop-color="blue"/>
    </radialGradient>
  </defs>
 
  <rect x="10" y="10" width="100" height="100"
      fill="url(#Gradient)" />

  <circle cx="60" cy="60" r="30" fill="transparent" stroke="white" stroke-width="1"/>
  <circle cx="50" cy="50" r="2" fill="white" stroke="white"/>
  <circle cx="60" cy="60" r="2" fill="white" stroke="white"/>
  <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text>
  <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text>
</svg>

白色圆圈仍然定义了形状，因此为了获得直观的结果，焦点应该在其内部。

在您发布的示例中，渐变本身非常小；仅占据中心周围 10 像素的半径。它定义了单一颜色过渡。条纹效果是由于repeat选项造成的。这是您的示例，其中显示了焦点和外部形状：

<svg xmlns="http://www.w3.org/2000/svg" xml:lang="en"xmlns:xlink="http://www.w3.org/1999/xlink"width="200px" height="200px" viewBox="0 0 200 200">
   <title>Bulls-eye Repeating Radial Gradient</title>
   <radialGradient id="bullseye"cx="50%" cy="50%" r="10%" spreadMethod="repeat">
     <stop stop-color="tomato" offset="50%"/>
     <stop stop-color="#222" offset="50%"/>
  </radialGradient>
  <rect width="100%" height="100%" fill="url(#bullseye)"/>
  <circle cx="50%" cy="50%" r="10%" fill="transparent" stroke="white" stroke-width="1"/>
  <circle cx="50%" cy="50%" r="2" fill="white" stroke="white"/>
</svg>

这是您的第二个示例（为了清楚起见，这次焦点以黑色显示）：

<svg xmlns="http://www.w3.org/2000/svg" xml:lang="en"xmlns:xlink="http://www.w3.org/1999/xlink"width="200px" height="200px" viewBox="0 0 200 200">
   <title>Bulls-eye Repeating Radial Gradient</title>
   <radialGradient id="bullseye"cx="50%" cy="50%" fx=".2" fy=".2" r="10%" spreadMethod="repeat">
     <stop stop-color="tomato" offset="50%"/>
     <stop stop-color="#222" offset="50%"/>
  </radialGradient>
  <rect width="100%" height="100%" fill="url(#bullseye)"/>
  <circle cx="50%" cy="50%" r="10%" fill="transparent" stroke="white" stroke-width="1"/>
  <circle cx="20%" cy="20%" r="2" fill="black" stroke="black"/>
</svg>