如何垂直为 Svg 路径设置动画？答案

【问题标题】：How do I animate a Svg path vertically?如何垂直为 Svg 路径设置动画？
【发布时间】：2021-07-25 02:37:15
【问题描述】：

我想为这条路径上下（垂直）设置动画。我为此使用了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>

希望你明白我的意思

【问题讨论】：

path="M0,0 0 50 90 0 90 10" 将等同于path="M0,0 L0 50 L90 0 L90 10" 尝试绘制这条路径，并亲眼看看您可以从动画中得到什么。对于垂直上下运动，您可以尝试类似“M0,0 0 50 0 0”

标签： javascript html reactjs animation svg

【解决方案1】：

您只需要为 animateMotion 提供正确的路径。在你的代码中应该是path="M0,0 0 90 0 0"

欲了解更多信息，请查看link

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

【讨论】：

知道了，但是如果我想水平移动它（左右运动）怎么办？
对于水平动画，你可以给这个path="M0,0 90 0 0 0"你需要知道animateMotion标签中path的语法是什么。在我的示例中，M StartingX StartingY MovingX MovingY Endingx EndingY FFI - developer.mozilla.org/en-US/docs/Web/SVG/Element/…