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.