javascript - SVG 对象跟随路径
问题描述
我有一个 svg 路径:
<path id="path" fill="black" stroke="black" stroke-width="1"
d="M 0.00,250.00
C 0.00,250.00 33.75,335.50 125.00,375.00
216.75,415.00 250.00,500.00 250.00,500.00
250.00,500.00 285.00,408.25 377.25,377.75
469.50,346.75 500.00,250.00 500.00,250.00
500.00,250.00 0.00,250.00 0.00,250.00 Z
M 90.00,308.50" />
我想要另一个(svg)对象跟随路径。我怎么做?
解决方案
使用动画运动
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="100vh" viewBox="0 0 600 600" >
<path id="pathID" fill="black" stroke="black" stroke-width="1"
d="M 0.00,250.00
C 0.00,250.00 33.75,335.50 125.00,375.00
216.75,415.00 250.00,500.00 250.00,500.00
250.00,500.00 285.00,408.25 377.25,377.75
469.50,346.75 500.00,250.00 500.00,250.00
500.00,250.00 0.00,250.00 0.00,250.00 Z
M 90.00,308.50" />
<circle cx="0" cy="0" r="15" fill="red" >
<animateMotion begin="0s" dur="4s" repeatCount="indefinite" >
<mpath xlink:href="#pathID" />
</animateMotion>
</circle>
</svg>
三键操作:
- 向前移动的红球
向前移动是指从路径的起点(矢量编辑器中绘制路径的起点)开始移动 - 红球向后移动
- 中途红球
var circ = document.getElementById("circle2");
var animation1 = document.getElementById("forward");
function forwardSVG(){
circ.style.opacity = "1";
animation1.beginElement();
}
var animation2 = document.getElementById("middle")
function middleSVG(){
circ.style.opacity = "1";
animation2.beginElement();
}
var animation3 = document.getElementById("back")
function backSVG(){
circ.style.opacity = "1";
animation3.beginElement();
}
<div id="pathContainer4">
<button id="btn1" onclick="forwardSVG()">forward</button >
<button id="btn2" onclick="middleSVG()">Middle<b/utton >
<button id="btn3" onclick="backSVG()">Back</button >
</div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="100vh" viewBox="0 0 600 600" >
<path transform="translate(0 -200)" id="pathID" fill="black" stroke="black" stroke-width="1"
d="M 0.00,250.00
C 0.00,250.00 33.75,335.50 125.00,375.00
216.75,415.00 250.00,500.00 250.00,500.00
250.00,500.00 285.00,408.25 377.25,377.75
469.50,346.75 500.00,250.00 500.00,250.00
500.00,250.00 0.00,250.00 0.00,250.00 Z
M 90.00,308.50" />
<circle id="circle2" cx="0" cy="-200" r="15" fill="red" opacity="0" >
<animateMotion
id="forward"
dur="2s"
begin="indefinite"
repeatCount="1"
keyPoints="0;1"
keyTimes="0;1"
calcMode="linear" >
<mpath href="#pathID" />
</animateMotion>
<animateMotion
id="middle"
dur="2s"
begin="indefinite"
repeatCount="1"
keyPoints="0.5;1"
keyTimes="0;1"
calcMode="linear" >
<mpath href="#pathID" />
</animateMotion>
<animateMotion
id="back"
dur="2s"
begin="indefinite"
repeatCount="1"
keyPoints="1;0"
keyTimes="0;1"
calcMode="linear" >
<mpath href="#pathID" />
</animateMotion>
</circle>
</svg>
推荐阅读
- html - 输入字段接受任何字符,忽略正则表达式
- java - 通过传递逗号分隔的属性列表来制作自定义 Java 对象
- node.js - 在 GitLab CI/CD 中缓存 Node.js 依赖项的便捷方式
- node.js - Namecheap、Node 和 Heroku 上的 SSL
- python - 遮罩张量取决于另一个张量
- node.js - 在快速路由中运行 http 模块 - NodeJS
- sql-server - 了解连接字符串的段
- c - 在 Visual Studio Code 上编译 C 文件代码时出现问题
- flutter - 可重复使用的颤振组件(页脚)
- c - 如何以相反的顺序打印矢量?