SVG渐变色答案

【问题标题】：SVG gradient colorSVG渐变色
【发布时间】：2020-04-27 18:26:48
【问题描述】：

您好，我在这里使用 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>

【问题讨论】：

为什么不添加更多的中间色标？
@Michael Mullany，我曾尝试添加多个色标，但没有得到输出
@RobertLongson 我更新了我的问题。
这就是你想要的（嗯 - 你需要调整颜色和 x2 - 但基本上它可以工作（至少在 Chrome/Windows 中）。这有什么问题？
@Michael Mullany，我正在努力实现完全显示在图像颜色中。

标签： javascript html css svg canvas

【解决方案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>

【讨论】：

感谢您的努力。