如何垂直设置 Svg 路径的动画？
[英]How do I animate a Svg path vertically?
问题描述
我想为这条路径上下（垂直）设置动画。 我为此使用了animationMotion，但我的路径正朝着不同的方向移动。
<svg width="698" height="745" viewBox="0 0 698 645" fill="none" xmlns="http://www.w3.org/2000/svg"> <path id="bottom-arrow" d="M404.767 578.541L414.523 592.852L397.251 594.146L404.767 578.541Z" stroke="#EEE8FB" stroke-width="2" > <animateMotion path="M0,0 0 50 90 0 90 10" begin="0s" dur="2s" repeatCount="indefinite" /> </path> </svg>希望你明白我的意思
1 个解决方案
解决方案1
0 2021-05-02 12:09:50
您只需要为 animateMotion 提供正确的路径。 在您的代码中，它应该是path="M0,0 0 90 0 0"
有关更多信息，请查看此链接
<svg width="698" height="745" viewBox="0 0 698 645" fill="none" xmlns="http://www.w3.org/2000/svg"> <path id="bottom-arrow" d="M404.767 578.541L414.523 592.852L397.251 594.146L404.767 578.541Z" stroke="#EEE8FB" stroke-width="2" > <animateMotion path="M0,0 0 90 0 0" begin="0s" dur="2s" repeatCount="indefinite" /> </path> </svg>
如何为SVG路径中的“填充”设置动画？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.