linear gradient у svg но без id
Здравствуйте, я нашел такой пример 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>
|
Вобщем удалось решыть поставив разные 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>
|
| Часовой пояс GMT +3, время: 13:49. |