Javascript-форум - анимацыя градиентов в svg при hover

Здравствуйте, я пытаюсь зоздать анимацыю градиентов при hover. Так как ето не возможно (background-position не подходит, а box-shadow слишком неудобен) я попробовал сделать ето в svg, но там тоже не получается:

<!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>
</body>
<style>
svg>rect{
transition all 5s linear;
}
	svg:hover .stop-start {
		stop-color: gold;
	}

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

</html>

я находил метод с налажыванием rect и изменением opacity, но ето скорее кастыль и врядли его можно считать удобным если градиентов может быть много...