本站消息
如何让 svg 遵循路径？
发布于2021-10-20 15:15 阅读(1353) 评论(0) 点赞(18) 收藏(2)
我正在尝试让 svg 遵循一条路径。但是 svg 圆圈只是停留在一个地方，不遵循路径。
.LineSvg {
fill: none;
stroke: $blue;
position: absolute;
margin-top: -2px;
left: 700px;
}<svg xmlns="http://www.w3.org/2000/svg" width="1167.85" height="841.719" viewBox="0 0 1167.85 841.719" className={styles.LineSvg}>
<path fill="none" id="wire" d="M-4766.667-2093.939s292-358.061,476-223.394S-4269.333-1874.667-3952-2028s221.818-437.333,9.576-338.667-154.546,321.212,151.515,272.727,193.333-429.818,17.576-487.394S-4220-2402.667-4429.333-2432s-317.333-102.667-257.333-232,429.091-48.121,474.545-163.273" transform="translate(4767.054 2827.456)" />
<circle cx="123.2" cy="646" r="11.7" fill="#63c6be" >
<animateMotion
dur="2.2s"
/>
<mpath xlinkHref="#wire"></mpath>
<animateMotion />
</circle>
</svg>它应该从路径（行）的开头开始并移动到行的顶部。
解决方案
标记中有许多阻止动画的语法错误。当这些被修复时，动画发生在屏幕外，因为路径的变换被 mpath 元素忽略。
- 语法在下面是固定的，我已经调整了 viewBox 以便动画可见。
- 我已经删除了路径元素上的非功能性转换。
- 我还添加了一个 fill="freeze" 否则圆圈会在最后消失，因为路径的位移太大了。
- 最后我把圆圈放大了，这样你仍然可以在更大的 viewBox 中看到它。
.LineSvg{
fill: none;
stroke: $blue;
position: absolute;
margin-top: -2px;
left: 700px;
}<svg xmlns="http://www.w3.org/2000/svg" width="1167.85" height="841.719" viewBox="-5000 -3000 5000 5000" className={styles.LineSvg} >
<path fill="none" id="wire" d="M-4766.667-2093.939s292-358.061,476-223.394S-4269.333-1874.667-3952-2028s221.818-437.333,9.576-338.667-154.546,321.212,151.515,272.727,193.333-429.818,17.576-487.394S-4220-2402.667-4429.333-2432s-317.333-102.667-257.333-232,429.091-48.121,474.545-163.273" />
<circle cx="123.2" cy="646" r="111.7" fill="#63c6be" >
<animateMotion
dur="2.2s" fill="freeze"
>
<mpath xlink:href="#wire"></mpath>
</animateMotion>
</circle>
</svg>所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/204502/7b58e578439338784bcc/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
18
0
收藏该文
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力
程序员的那些事(new)
电子书(new)
博客(new)
视频教程(new)
问答(new)
游戏(new)