小编Mon*_*_PC的帖子

通过点移动 SVG 路径

这可能看起来很奇怪,但我想通过一个固定点移动一些 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)

javascript animation svg path

1
推荐指数
1
解决办法
444
查看次数

标签 统计

animation ×1

javascript ×1

path ×1

svg ×1