Is there a way to change the offset value of the SVG Gradient Stop using CSS?

I have an SVG gradient and want to animate the value of the stop offset.

I tried the <animate> tag in <stop>, it works fine in Chrome browsers, etc., but IE / Edge. I tried smil.user.js , then IE is fine, but Edge still doesn't work.

After a long search, Google still cannot find a way to solve the problem.

Unfortunately, Chrome tells me: "SVG SMIL animations (<animate>, <set>, etc.) are outdated and will be deleted. Instead, use CSS animations or web animations."

Web animations use JavaScript to animate elements, and it is now supported by Edge, but I don't want to use JavaScript. I can use GASP or other js methods.

Animated CSS animations can animate style attributes, but I don't know how to animate the dom attribute, such as the "offset" <stop>.

Is there a way to change the offset value of the SVG Gradient Stop only using CSS?

Thanks for any achievements!

<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-44.0633" y1="130.4958" x2="458.3425" y2="-60.602">
    <stop  offset="0.04" style="stop-color:#FFFFFF;stop-opacity:0">
        <animate attributeName="offset" dur="3s" values="0.04;0.94" repeatCount="indefinite" />
    </stop>
    <stop  offset="0.08" style="stop-color:#FFFFFF">
        <animate attributeName="offset" dur="3s" values="0.08;0.98" repeatCount="indefinite" />
    </stop>
    <stop  offset="0.10" style="stop-color:#FFFFFF;stop-opacity:0">
        <animate attributeName="offset" dur="3s" values="0.10;1" repeatCount="indefinite" />
    </stop>
</linearGradient>
</defs>
<rect x="-94" y="-40.5" fill-rule="evenodd" clip-rule="evenodd" fill="url(#SVGID_1_)" width="602" height="151"/>

This is an example on CodePen. Works great in Chrome, IE11 (with smil.user.js), but Edge fails.

+4
source share

Source: https://habr.com/ru/post/1628147/


All Articles