SVG渐变颜色

Question

你好，我正在处理SVG图像，尝试像这样为SVG添加渐变

需要白色和灰色的渐变效果，但我无法实现所需的输出。有人能指点我正确的方向吗？

<svg viewBox="0 0 400 400">
    <defs>  
   <linearGradient id="GradientRepeat" x1="0" y1="1" x2="0" y2="0" spreadMethod="repeat">
      <stop offset="0.05" stop-color="#fff" stop-opacity="0"/>
      <stop offset="1" stop-color="#777" stop-opacity="1"/>
    </linearGradient>
   </defs>
    <circle class="sub-menu-circle" cx="0" cy="200" r="160" fill="url(#GradientRepeat)" />
 </svg>

<svg viewBox="0 0 700 700" class="bubble-svg">
 <defs>

  <linearGradient id="GradientRepeat" x1="0" y1="1" x2="0" y2="0" spreadMethod="repeat" gradientTransform="rotate(170)">
   <stop offset="0%" stop-color="#fff" stop-opacity="0"/>
   <stop offset="10%" stop-color="#bdbdbd" stop-opacity="0.5"/>
   <stop offset="20%" stop-color="#fff" stop-opacity="0"/>
   <stop offset="30%" stop-color="#bdbdbd" stop-opacity="0.5"/>
   <stop offset="40%" stop-color="#fff" stop-opacity="0"/>
   <stop offset="50%" stop-color="#bdbdbd" stop-opacity="1"/>

   <stop offset="60%" stop-color="#fff" stop-opacity="0"/>
   <stop offset="70%" stop-color="#bdbdbd" stop-opacity="0.5"/>
   <stop offset="80%" stop-color="#bdbdbd" stop-opacity="0"/>
   <stop offset="100%" stop-color="#fbfbfb" stop-opacity="0.5"/>

  </linearGradient>
 </defs>
 <circle class="sub-menu-circle" cx="0" cy="200" r="160" fill="url(#GradientRepeat)" />
</svg>

- Husna

---

为什么不添加更多的中间颜色停止呢？ - Michael Mullany

@Michael Mullany，我曾尝试过添加多个颜色停止位，但并没有得到想要的输出结果。 - Husna

@RobertLongson 我更新了我的问题。 - Husna

这个做你想要的事情（好吧 - 你需要调整颜色和x2 - 但基本上它在Chrome / Windows中工作（至少是这样）。这有什么问题吗？ - Michael Mullany

@ Michael Mullany，我正在尝试实现与图像中显示的颜色完全相同的效果。 - Husna

Answer 1

微调灰色和白色颜色的渲染取决于您使用的显卡、浏览器和操作系统。因此，我会提供几个选项。您可以选择任何一个选项，或通过更改颜色稍微进行自定义。

<svg viewBox="0 0 700 700" class="bubble-svg">
 <defs>

  <linearGradient id="GradientRepeat" x1="0" y1="0" x2="0" y2="1" spreadMethod="repeat" gradientTransform="rotate(170)">
  
   <stop offset="0%" stop-color="#B4B4B5" stop-opacity="1"/>
   <stop offset="17%" stop-color="#fff" stop-opacity="0.8"/>
   
   <stop offset="30%" stop-color="#B4B4B5" stop-opacity="0.6"/>
   <stop offset="49%" stop-color="#fff" stop-opacity="0.8"/>
   
   <stop offset="61%" stop-color="#B4B4B5" stop-opacity="0.6"/>
   <stop offset="80%" stop-color="#fff" stop-opacity="0.8"/>
    <stop offset="95%" stop-color="#B4B4B5" stop-opacity="1"/>
 
  </linearGradient>
 </defs>
 <circle class="sub-menu-circle" cx="0" cy="200" r="160" fill="url(#GradientRepeat)" />
</svg>

2# 变体

<svg viewBox="0 0 700 700" class="bubble-svg">
 <defs>

  <linearGradient id="GradientRepeat" x1="0" y1="0" x2="0" y2="1" spreadMethod="repeat" gradientTransform="rotate(170)">
  
   <stop offset="0%" stop-color="#B4B4B5" stop-opacity="1"/>
   <stop offset="17%" stop-color="#F6F6F6" stop-opacity="0.8"/>
   
   <stop offset="30%" stop-color="#B4B4B5" stop-opacity="0.6"/>
   <stop offset="49%" stop-color="#F6F6F6" stop-opacity="0.8"/>
   
   <stop offset="61%" stop-color="#B4B4B5" stop-opacity="0.6"/>
   <stop offset="80%" stop-color="#F6F6F6" stop-opacity="0.8"/>
    
   <stop offset="95%" stop-color="#B4B4B5" stop-opacity="1"/>
  </linearGradient>
 </defs>
 <circle class="sub-menu-circle" cx="0" cy="200" r="160" fill="url(#GradientRepeat)" />
</svg>  

3# 变体

<svg viewBox="0 0 700 700" class="bubble-svg">
 <defs>

  <linearGradient id="GradientRepeat" x1="0" y1="0" x2="0" y2="1" spreadMethod="repeat" gradientTransform="rotate(170)">
  
   <stop offset="0%" stop-color="#ABABAC" stop-opacity="1"/>
   <stop offset="17%" stop-color="#fff" stop-opacity="0.8"/>
   
   <stop offset="30%" stop-color="#ABABAC" stop-opacity="0.6"/>
   <stop offset="49%" stop-color="#fff" stop-opacity="0.8"/>
   
   <stop offset="61%" stop-color="#ABABAC" stop-opacity="0.6"/>
   <stop offset="80%" stop-color="#fff" stop-opacity="0.8"/>
   
   
   <stop offset="95%" stop-color="#ABABAC" stop-opacity="1"/>

  </linearGradient>
 </defs>
 <circle class="sub-menu-circle" cx="0" cy="200" r="160" fill="url(#GradientRepeat)" />
</svg>  

为了更精确地调整到您的喜好，最好使用 stop-color 和 stop-opacity 来选择值。

更新

对于方法 spreadMethod="repeat" 在您的示例中开始工作，需要将渐变覆盖范围减少三倍。为此，请设置x1="0" y1="0" x2="0" y2="0.33"。
结果是，通过调整一个波的颜色色调，我们得到完全相同的副本，这与大量使用 stop-offset 选项相比，使该过程变得更加容易。

<svg viewBox="0 0 700 700" class="bubble-svg">
 <defs>

  <linearGradient id="GradientRepeat" x1="0" y1="0" x2="0" y2="0.33" 
     spreadMethod="repeat"  gradientTransform="rotate(170)">
  
   <stop offset="10%" stop-color="#ABABAC" stop-opacity="1"/>
   <stop offset="50%" stop-color="#ffffff" stop-opacity="0.8"/>
   <stop offset="85%" stop-color="#ABABAC" stop-opacity="1"/>
  </linearGradient>
 </defs>
 <circle class="sub-menu-circle" cx="0" cy="200" r="160" fill="url(#GradientRepeat)" />
</svg>  

- Alexandr_TT

---

我很感激你的努力。 - Husna