SVG 动画渐变停止
我有一个 SVG，我想为从左到右和后退的渐变停止设置动画。 我设法从左到右设置动画，但我不知道如何将其设置为动画。
这是我的代码：
<svg id="mySvg" width="700px" height="498px">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-0.4998" y1="250" x2="700" y2="250">
<stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0.1">
<animate attributeName="offset" begin="0s" dur="2s" from="0" to="1" repeatCount="indefinite" />
</stop>
<stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0.1"/>
</linearGradient>
<path fill="url(#SVGID_1_)" d="M691.115,114.684c-9.084,0-16.193,7.1 ..."/>
</svg>
我需要做什么才能创建一个动画，使渐变停止点不断从左到右然后返回？
非常感谢，
文森特
I have an SVG and I would like to animate a gradient stop from left to right and back.
I managed to animate the left to right, but I don't know how to animate it back.
Here is my code:
<svg id="mySvg" width="700px" height="498px">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-0.4998" y1="250" x2="700" y2="250">
<stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0.1">
<animate attributeName="offset" begin="0s" dur="2s" from="0" to="1" repeatCount="indefinite" />
</stop>
<stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0.1"/>
</linearGradient>
<path fill="url(#SVGID_1_)" d="M691.115,114.684c-9.084,0-16.193,7.1 ..."/>
</svg>
What do I have to do to create an animation that moves the gradient stop constantly from left to right and back?
Thanks a lot,
Vincent
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
尝试使用values='0;1;0'，而不是使用from 和to 属性。 Values 属性允许您指定随着时间的推移希望使用的任意数量的值，而不仅仅是末端的两个值。
有时可能难以消化，但规范中的相关章节涵盖了许多对于动画有用的知识：http://www.w3.org/TR/SVG/animate.html
Instead of using from and to attributes, try using values='0;1;0'. The values attribute allows you to specify as many values you wish to use over time instead of just the two at the extremities.
It can be difficult to digest at times, but the relevant chapter in the specification covers a lot of ground that is useful to know for animation: http://www.w3.org/TR/SVG/animate.html