如何使用HTML、CSS和JavaScript沿着指定的SVG路径为椭圆形状的div元素设置动画？

kmbjn2e3 于 2023-06-07 发布在 Java

关注(0)|答案(1)|浏览(176)

我尝试按照指定的SVG路径，以椭圆的形状制作div元素的动画。我定义了SVG路径，并希望沿着该路径平滑地移动div元素。使用HTML、CSS和JavaScript实现此效果的最佳方法是什么？

<section class="mission-statement">
  <svg class="vector" xmlns="http://www.w3.org/2000/svg" width="1650" height="721" viewBox=" 0 0 1650 821"><g clip-path="url(#a)"><path id="motionPath" stroke="#fff" stroke-linecap="round" stroke-opacity=".6" stroke-width="1.5" d="M1728 410.5c-264.11 443.383-336.42 443.383-125.14 0 164.7-247.83 138.29-247.83-79.23 0-264.11 247.83-290.52 247.83-79.23 0 202.21-226.532 175.8-226.532-79.23 0-264.11 226.532-290.52 226.532-79.24 0 330.48-482.106 304.07-482.106-79.23 0-264.108 482.106-290.519 482.106-79.23 0 222.74-534.383 196.33-534.383-79.23 0-264.113 534.383-290.524 534.383-79.237 0 167.267-311.723 140.857-311.723-79.232 0-264.109 311.723-290.52 311.723-79.233 0 223.752-348.51 197.342-348.51-79.233 0-264.108 348.511-290.519 348.511-79.232 0C897.4-50.309 870.99-50.309 572.84 410.5c-264.108 460.809-290.519 460.809-79.232 0 213.506-470.49 187.095-470.49-79.233 0-264.108 470.489-290.519 470.489-79.232 0 228.242-546 201.831-546-79.233 0-264.108 546-290.52 546-79.233 0C365.112-17.394 241.257-17.394 0 410.5"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h1728v821H0z"/></clipPath></defs></svg>
  <div class="ellipse"></div>
</section>

我希望id为“ellipse”的div沿着id为“motionPath”的SVG路径元素定义的路径自动来回移动。我怎样才能完成这个动画？有没有JavaScript库或技术可以帮助我实现这个效果？
任何帮助或指导都将不胜感激。感谢您的评分

css

来源：https://stackoverflow.com/questions/76392060/how-can-i-animate-a-div-element-in-an-ellipse-shape-along-a-specified-svg-path-u

1条答案

按热度按时间

mm9b1k5b1#

实现这一点的一种方法是使用SMIL和<animateMotion>。在这个例子中，我稍微清理了一下SVG，只使用了运动路径的路径部分。然后我将其应用于半径为25、填充颜色为蓝色的<circle>元素。dur属性设置动画持续时间，fill属性设置为freeze时，会导致圆在动画的最后一帧“冻结”，而不是返回到开始。

svg {
  height: 90vh;
}

<section class="mission-statement">
  <svg viewBox="0 0 1100 690" xmlns="http://www.w3.org/2000/svg" height="100%" width="100%">
    <circle r="25" fill="blue">
      <animateMotion
        dur="20s"
        fill="freeze"
        path="M124.36,344.22c-185.55,458.08-162.36,458.08,69.58,0,246.83-458.08,270.02-458.08,69.58,0-185.55,394.73-162.36,394.73,69.58,0,233.89-394.73,257.08-394.73,69.58,0-185.55,386.61-162.36,386.61,69.58,0,261.83-386.61,285.03-386.61,69.58,0-185.55,292.39-162.36,292.39,69.58,0,242.89-292.39,266.08-292.39,69.58,0-185.55,261.53-131.3,280.39,69.58,0,193.28-261.53,216.47-261.53,69.58,0-185.98,318.28-162.49,409.19,69.59,0,242-448.33,265.19-448.33,69.58" />
    </circle>
  </svg>
</section>

SMIL实际上有很好的浏览器支持（尽管Chrome弃用了它，后来又取消了它）。它甚至可以与<img>标签一起使用，并在许多浏览器中作为CSS中的背景图像。
了解更多here和here。

赞(0）回复(0）举报 2023-06-07

我来回答

如何使用HTML、CSS和JavaScript沿着指定的SVG路径为椭圆形状的div元素设置动画？

1条答案

相关问题

热门标签

最新问答