通过点移动 SVG 路径
Moving SVG path through points
这可能看起来很奇怪，但我想通过一个固定点移动一些 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);
}
<div class="svgDiv">
<svg version="1.1" id="mySVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 1306 989" style="enable-background:new 0 0 1306 989;" xml:space="preserve">
<style type="text/css">
.st1 {
fill: #fff;
stroke: #000000;
stroke-width: 3;
stroke-miterlimit: 10;
}
.st2 {
fill: none;
stroke: #ff0000;
stroke-width: 8;
stroke-miterlimit: 10;
stroke-linecap: round;
}
</style>
<g>
<path id="chemin" class="st2" d="M315,443l13-11h13l13-2h9l7.5,1.5h10l8-4l4-5l15,5l10,4h12h16l16-2l4-1h11h9l8-6h6l8-2l5-3l4-2l5-4l3-3v-4l4-3
l5-1h11c0,0,0,0,2,0s12,0,12,0l6,3l3,4l4,4l6,2c0,0,1,0,3-1s6-3,6-3l3-2l5,1h6l8,3l8,1c0,0,4,1,5,1s9,0,9,0l7,1h9h5l6-2l4-1l4-3
l5-2l6-4l4-5l4-4l2-5c0,0,1-2,1-4s0-5,0-5v-4c0,0,4,3,4,3l7,2l5,3l6,1l11,2l8,2l7,5l10,2c3-3,6-5,6-5l4-3l4-2l4,2l4-1l-2-6l5-5
c0,0,8,3,8,0s4-6,4-6l6-4l3-4l6-6c0,0,0-3-2-7s-5-8-5-8s-2-5-3-9s-4-9-4-11s2-6,1-8s-5-7-5-7v-8l-1-7v-5l-8-11">
</path>
</g>
</svg>
</div>
起初这似乎是一个想法，但现在我觉得它不会让我到任何地方，我被困住了...
编辑：
一张图可能会让这个更容易理解，
that's the "steps" I want
const path = document.getElementById('chemin')
const svg = document.getElementById("mySVG");
const rect = svg.getAttribute('viewBox').split(' ');
const cx = rect[2]/2;
const cy = rect[3]/5; // Should be /2 (to not be out of small view field here)
const circle = svg.querySelector('circle');
circle.setAttribute('cx', cx);
circle.setAttribute('cy', cy);
const intersections = 30;
const timeStep = 500;
const points = [];
for(let i=0; i <= intersections; i++){
points.push(path.getPointAtLength((path.getTotalLength()/intersections)*i));
}
points.forEach((p,i) => {
setTimeout(() => {movePath(p)}, timeStep*i);
})
function movePath(point){
path.setAttribute('transform', `translate(${cx-point.x}, ${cy-point.y})`);
}
<div class="svgDiv">
<svg version="1.1" id="mySVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 1306 989" style="enable-background:new 0 0 1306 989;" xml:space="preserve">
<style type="text/css">
.st1 {
fill: #fff;
stroke: #000000;
stroke-width: 3;
stroke-miterlimit: 10;
}
.st2 {
fill: none;
stroke: #ff0000;
stroke-width: 8;
stroke-miterlimit: 10;
stroke-linecap: round;
}
</style>
<g>
<path id="chemin" class="st2" d="M315,443l13-11h13l13-2h9l7.5,1.5h10l8-4l4-5l15,5l10,4h12h16l16-2l4-1h11h9l8-6h6l8-2l5-3l4-2l5-4l3-3v-4l4-3
l5-1h11c0,0,0,0,2,0s12,0,12,0l6,3l3,4l4,4l6,2c0,0,1,0,3-1s6-3,6-3l3-2l5,1h6l8,3l8,1c0,0,4,1,5,1s9,0,9,0l7,1h9h5l6-2l4-1l4-3
l5-2l6-4l4-5l4-4l2-5c0,0,1-2,1-4s0-5,0-5v-4c0,0,4,3,4,3l7,2l5,3l6,1l11,2l8,2l7,5l10,2c3-3,6-5,6-5l4-3l4-2l4,2l4-1l-2-6l5-5
c0,0,8,3,8,0s4-6,4-6l6-4l3-4l6-6c0,0,0-3-2-7s-5-8-5-8s-2-5-3-9s-4-9-4-11s2-6,1-8s-5-7-5-7v-8l-1-7v-5l-8-11">
</path>
</g>
<circle cx="0" cy="0" r="5" fill="#8888ff"></circle>
</svg>
</div>
主要思想是我在更改路径上圆圈的位置的同时更改 svg 元素的 viewBox 属性的值。这是给人一种错觉路径在移动而不是点。
我正在使用输入类型范围来移动圆圈。
start 变量表示路径的起始点 (d="M315,443...) 以及点的初始位置：<circle cx="315" cy="443".
请阅读代码中的注释。
let lengthChemin = chemin.getTotalLength();
// the starting point of the circle on the path
let start={x:315,y:443}
//while moving the thumb of the slider
control.addEventListener("input", ()=>{
// get the actual value of the input
let val = parseInt(control.value);
//get the new position of the circle on the path
let pos = chemin.getPointAtLength(lengthChemin*val/100);
//update the circle's position
updateElement({cx:pos.x, cy:pos.y}, circle)
//update the viewBox value
theSVG.setAttribute("viewBox",`${pos.x - start.x} ${pos.y - start.y} 1306 600`)
})
function updateElement(o, element) {
for (var name in o) {
if (o.hasOwnProperty(name)) {
element.setAttributeNS(null, name, o[name]);
}
}
return element;
}
<input id="control" type="range" min="0" max="100" value="0" />
<svg id="theSVG" viewBox="0 0 1306 600">
<g transform="translate(0,-250)">
<path id="chemin" stroke="red" stroke-width="3" fill="none" d="M315,443l13-11h13l13-2h9l7.5,1.5h10l8-4l4-5l15,5l10,4h12h16l16-2l4-1h11h9l8-6h6l8-2l5-3l4-2l5-4l3-3v-4l4-3
l5-1h11c0,0,0,0,2,0s12,0,12,0l6,3l3,4l4,4l6,2c0,0,1,0,3-1s6-3,6-3l3-2l5,1h6l8,3l8,1c0,0,4,1,5,1s9,0,9,0l7,1h9h5l6-2l4-1l4-3
l5-2l6-4l4-5l4-4l2-5c0,0,1-2,1-4s0-5,0-5v-4c0,0,4,3,4,3l7,2l5,3l6,1l11,2l8,2l7,5l10,2c3-3,6-5,6-5l4-3l4-2l4,2l4-1l-2-6l5-5
c0,0,8,3,8,0s4-6,4-6l6-4l3-4l6-6c0,0,0-3-2-7s-5-8-5-8s-2-5-3-9s-4-9-4-11s2-6,1-8s-5-7-5-7v-8l-1-7v-5l-8-11">
</path>
<circle id="circle" cx="315" cy="443" r="10"/>
</g>
</svg>
Observation: I'm translating the group with the path and the circle ONLY because I want it to be visible when you run the snippet. You can remove this.
这可能看起来很奇怪，但我想通过一个固定点移动一些 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);
}
<div class="svgDiv">
<svg version="1.1" id="mySVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 1306 989" style="enable-background:new 0 0 1306 989;" xml:space="preserve">
<style type="text/css">
.st1 {
fill: #fff;
stroke: #000000;
stroke-width: 3;
stroke-miterlimit: 10;
}
.st2 {
fill: none;
stroke: #ff0000;
stroke-width: 8;
stroke-miterlimit: 10;
stroke-linecap: round;
}
</style>
<g>
<path id="chemin" class="st2" d="M315,443l13-11h13l13-2h9l7.5,1.5h10l8-4l4-5l15,5l10,4h12h16l16-2l4-1h11h9l8-6h6l8-2l5-3l4-2l5-4l3-3v-4l4-3
l5-1h11c0,0,0,0,2,0s12,0,12,0l6,3l3,4l4,4l6,2c0,0,1,0,3-1s6-3,6-3l3-2l5,1h6l8,3l8,1c0,0,4,1,5,1s9,0,9,0l7,1h9h5l6-2l4-1l4-3
l5-2l6-4l4-5l4-4l2-5c0,0,1-2,1-4s0-5,0-5v-4c0,0,4,3,4,3l7,2l5,3l6,1l11,2l8,2l7,5l10,2c3-3,6-5,6-5l4-3l4-2l4,2l4-1l-2-6l5-5
c0,0,8,3,8,0s4-6,4-6l6-4l3-4l6-6c0,0,0-3-2-7s-5-8-5-8s-2-5-3-9s-4-9-4-11s2-6,1-8s-5-7-5-7v-8l-1-7v-5l-8-11">
</path>
</g>
</svg>
</div>
起初这似乎是一个想法，但现在我觉得它不会让我到任何地方，我被困住了...
编辑： 一张图可能会让这个更容易理解， that's the "steps" I want
const path = document.getElementById('chemin')
const svg = document.getElementById("mySVG");
const rect = svg.getAttribute('viewBox').split(' ');
const cx = rect[2]/2;
const cy = rect[3]/5; // Should be /2 (to not be out of small view field here)
const circle = svg.querySelector('circle');
circle.setAttribute('cx', cx);
circle.setAttribute('cy', cy);
const intersections = 30;
const timeStep = 500;
const points = [];
for(let i=0; i <= intersections; i++){
points.push(path.getPointAtLength((path.getTotalLength()/intersections)*i));
}
points.forEach((p,i) => {
setTimeout(() => {movePath(p)}, timeStep*i);
})
function movePath(point){
path.setAttribute('transform', `translate(${cx-point.x}, ${cy-point.y})`);
}
<div class="svgDiv">
<svg version="1.1" id="mySVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 1306 989" style="enable-background:new 0 0 1306 989;" xml:space="preserve">
<style type="text/css">
.st1 {
fill: #fff;
stroke: #000000;
stroke-width: 3;
stroke-miterlimit: 10;
}
.st2 {
fill: none;
stroke: #ff0000;
stroke-width: 8;
stroke-miterlimit: 10;
stroke-linecap: round;
}
</style>
<g>
<path id="chemin" class="st2" d="M315,443l13-11h13l13-2h9l7.5,1.5h10l8-4l4-5l15,5l10,4h12h16l16-2l4-1h11h9l8-6h6l8-2l5-3l4-2l5-4l3-3v-4l4-3
l5-1h11c0,0,0,0,2,0s12,0,12,0l6,3l3,4l4,4l6,2c0,0,1,0,3-1s6-3,6-3l3-2l5,1h6l8,3l8,1c0,0,4,1,5,1s9,0,9,0l7,1h9h5l6-2l4-1l4-3
l5-2l6-4l4-5l4-4l2-5c0,0,1-2,1-4s0-5,0-5v-4c0,0,4,3,4,3l7,2l5,3l6,1l11,2l8,2l7,5l10,2c3-3,6-5,6-5l4-3l4-2l4,2l4-1l-2-6l5-5
c0,0,8,3,8,0s4-6,4-6l6-4l3-4l6-6c0,0,0-3-2-7s-5-8-5-8s-2-5-3-9s-4-9-4-11s2-6,1-8s-5-7-5-7v-8l-1-7v-5l-8-11">
</path>
</g>
<circle cx="0" cy="0" r="5" fill="#8888ff"></circle>
</svg>
</div>
主要思想是我在更改路径上圆圈的位置的同时更改 svg 元素的 viewBox 属性的值。这是给人一种错觉路径在移动而不是点。
我正在使用输入类型范围来移动圆圈。
start 变量表示路径的起始点 (d="M315,443...) 以及点的初始位置：<circle cx="315" cy="443".
请阅读代码中的注释。
let lengthChemin = chemin.getTotalLength();
// the starting point of the circle on the path
let start={x:315,y:443}
//while moving the thumb of the slider
control.addEventListener("input", ()=>{
// get the actual value of the input
let val = parseInt(control.value);
//get the new position of the circle on the path
let pos = chemin.getPointAtLength(lengthChemin*val/100);
//update the circle's position
updateElement({cx:pos.x, cy:pos.y}, circle)
//update the viewBox value
theSVG.setAttribute("viewBox",`${pos.x - start.x} ${pos.y - start.y} 1306 600`)
})
function updateElement(o, element) {
for (var name in o) {
if (o.hasOwnProperty(name)) {
element.setAttributeNS(null, name, o[name]);
}
}
return element;
}
<input id="control" type="range" min="0" max="100" value="0" />
<svg id="theSVG" viewBox="0 0 1306 600">
<g transform="translate(0,-250)">
<path id="chemin" stroke="red" stroke-width="3" fill="none" d="M315,443l13-11h13l13-2h9l7.5,1.5h10l8-4l4-5l15,5l10,4h12h16l16-2l4-1h11h9l8-6h6l8-2l5-3l4-2l5-4l3-3v-4l4-3
l5-1h11c0,0,0,0,2,0s12,0,12,0l6,3l3,4l4,4l6,2c0,0,1,0,3-1s6-3,6-3l3-2l5,1h6l8,3l8,1c0,0,4,1,5,1s9,0,9,0l7,1h9h5l6-2l4-1l4-3
l5-2l6-4l4-5l4-4l2-5c0,0,1-2,1-4s0-5,0-5v-4c0,0,4,3,4,3l7,2l5,3l6,1l11,2l8,2l7,5l10,2c3-3,6-5,6-5l4-3l4-2l4,2l4-1l-2-6l5-5
c0,0,8,3,8,0s4-6,4-6l6-4l3-4l6-6c0,0,0-3-2-7s-5-8-5-8s-2-5-3-9s-4-9-4-11s2-6,1-8s-5-7-5-7v-8l-1-7v-5l-8-11">
</path>
<circle id="circle" cx="315" cy="443" r="10"/>
</g>
</svg>
Observation: I'm translating the group with the path and the circle ONLY because I want it to be visible when you run the snippet. You can remove this.