Question

我有一个SVG渐变，想要设置停止偏移值的动画。

我尝试了＆lt; animate＆gt;标记在＆lt; stop＆gt;标签，它适用于Chrome＆amp;等浏览器，但IE / Edge。我已经尝试了smil.user.js，然后IE就可以了，但Edge仍无法正常工作。

经过漫长的谷歌搜索，仍无法找到任何解决方法。

可悲的是，Chrome告诉我“SVG的SMIL动画（＆lt; animate＆gt;，＆lt; set＆gt;等）已被弃用，将被删除。请改用CSS动画或网络动画。”

Web动画使用JavaScript来动画元素，现在Edge支持它，但我不想使用JavaScript。我可以使用GASP或其他js方法。

CSS动画可以为样式属性设置动画，但我不知道如何设置dom属性的动画，例如＆lt; stop＆gt;的“offset”。

有没有办法用CSS单独设置SVG Gradient Stop的偏移值？

感谢您的任何进步！

<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"/>

这是CodePen上的example 适用于Chrome，IE11（使用smil.user.js），但Edge失败。

有没有办法用CSS单独设置SVG Gradient Stop的偏移值？

0 个答案: