Форум

fori · #1 (**permalink**) 09.04.2021, 04:51

Здравствуйте, я нашел такой пример svg linear gradient

<svg >
    <linearGradient id="myGradient" >
      <stop offset="0%"  stop-color="silver" class="stop-start"/>
      <stop offset="100%" stop-color="gold" class="stop-end"/>
    </linearGradient>
<rect fill="url(#myGradient)" width="100%" height="100%" />
</svg>

Но можно ли обойтись без id в етом случае...
Я попытался сделать аналог кнопки только с анимированым градиентом, но никак не могу заставить коректно работать hover для нескольких кнопок((

<!DOCTYPE html>

<body>
	<svg>
		<linearGradient id="myGradient">
			<stop offset="0%" stop-color="silver" class="stop-start" />
			<stop offset="100%" stop-color="gold" class="stop-end" />
		</linearGradient>
		<rect fill="url(#myGradient)" width="100%" height="100%" />
	</svg>
	<svg>
		<linearGradient id="myGradient">
			<stop offset="0%" stop-color="silver" class="stop-start" />
			<stop offset="100%" stop-color="gold" class="stop-end" />
		</linearGradient>
		<rect fill="url(#myGradient)" width="100%" height="100%" />
	</svg>
</body>
<style>
	svg:hover .stop-start {
		stop-color: gold;
	}
	svg:hover .stop-end {
		stop-color: black;
	}
</style>

</html>

fori · #2 (**permalink**) 09.04.2021, 04:57

Вобщем удалось решыть поставив разные id, но хотелось бы без id))

<!DOCTYPE html>

<body>
	<svg>
		<linearGradient id="myGradient1">
			<stop offset="0%" stop-color="silver" class="stop-start" />
			<stop offset="100%" stop-color="gold" class="stop-end" />
		</linearGradient>
		<rect fill="url(#myGradient1)" width="100%" height="100%" />
	</svg>
	<svg>
		<linearGradient id="myGradient2">
			<stop offset="0%" stop-color="silver" class="stop-start" />
			<stop offset="100%" stop-color="gold" class="stop-end" />
		</linearGradient>
		<rect fill="url(#myGradient2)" width="100%" height="100%" />
	</svg>
</body>
<style>
	svg:hover .stop-start {
		stop-color: gold;
	}

	svg:hover .stop-end {
		stop-color: black;
	}
</style>

</html>

Форум

Справочник

Discord чат

Курсы javascript