SVG渐变色 [英] SVG gradient color

问题描述

我在这里使用SVG，我试图像这样将渐变添加到SVG

Hi I'm working with SVG here I trying to add the gradient to SVG like this

白色和灰色渐变，但无法实现所需的输出.谁能指出我正确的方向.

white and grey gradient but I unable to achieve the desired output. Can anyone point me in the right direction.

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

推荐答案

微调灰色和白色阴影的呈现方式取决于您使用的视频卡，浏览器和操作系统.

Fine-tuning the rendering of shades of gray and white colors depends on which video card, browser and operating system you are using.

因此，我要发送几个选项.您可以使用任何喜欢的选项，也可以通过更改颜色对其稍作调整.

Therefore, I am sending several options. You can use any option that you prefer or slightly adjust for yourself by changing the colors.

<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选择值.

For a more precise adjustment to your taste, it is better to use stop-color and stop-opacity choosing values.

更新

要使方法spreadMethod ="repeat"在您的示例中开始起作用，您需要将梯度覆盖率减少三倍.为此，请设置x1 ="0" y1 ="0" x2 ="0" y2 ="0.33"
结果，调整一个波形的色调，我们得到了完全相同的副本，与使用大量stop-offset

For the method spreadMethod ="repeat" to start working in your example, you need to reduce the gradient coverage by three times. To do this, set x1 ="0" y1 ="0" x2 ="0" y2 ="0.33"
As a result, adjusting the color tones of one wave, we get completely identical copies of it, which facilitates the process compared to the option of a large number of 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>  

这篇关于SVG渐变色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！