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>

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>