html - 如何在悬停时为 svg 背景渐变设置动画？

您好，这段代码更改了背景渐变，但我如何为其设置动画转换所有 5s 线性不起作用

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

如何在悬停时为 svg 背景渐变设置动画？

0 个答案: