这可能看起来很奇怪,但我想通过一个固定点移动一些 SVG 路径。我知道如何通过路径对点进行动画处理,<animateMotion>并且我试图获得相同的结果,但该点将被固定,并且路径将穿过它。
到目前为止,我认为我可以使用path.getTotalLength(),我做了一个循环来在我的路径上创建点,并且我想将我的路径设置为以每个点为中心的动画,但我对 SVG 和 Javascript 的了解非常有限。
const path = document.getElementById('chemin')
let svg = document.getElementById("mySVG");
let totalLength = path.getTotalLength();
let intersections = 30;
for (var i = 0; i <= intersections; i++) {
let distance = i * 1 / intersections * totalLength;
let point = path.getPointAtLength(distance);
addCircleToSVG(point.x, point.y);
}
function addCircleToSVG(x, y) {
let circle = document.createElementNS("http://www.w3.org/2000/svg", 'circle');
circle.setAttribute("cx", x);
circle.setAttribute("cy", y);
circle.setAttribute("r", "5");
circle.setAttribute("fill", "#8888ff");
svg.appendChild(circle);
}Run Code Online (Sandbox Code Playgroud)
<div class="svgDiv">
<svg version="1.1" id="mySVG" xmlns="http://www.w3.org/2000/svg" …Run Code Online (Sandbox Code Playgroud)