SVG 径向渐变 - 移动焦点(中心)

Question

我现在正在研究 SVG，并卡在径向渐变主题上，关于精确移动径向渐变中心。比方说，我有 2 个渐变示例 ( codepen snippet to play around )。一个基本的(完美运行):

    <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>

在这里它只是切割了一 block 形状而不是仅仅移动了一个中心点。

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

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>