javascript - 使用 getPointAtLength() 将圆添加到路径已移动

Question

我会动态地向路径添加点

这是我的代码

const cir1 = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
let path= document.getElementById('path9');

this.getPath=path;
let g = document.createElementNS('http://www.w3.org/2000/svg', 'g');

let pt = path.getPointAtLength('60');
g.setAttribute('transform', `translate(${pt.x},${pt.y})`);
g.appendChild(cir1)
cir1.setAttribute('r', '3');
cir1.setAttribute('fill', 'red');
cir1.setAttribute('id','123');
let svg =document.getElementById('Calque_1');
svg.appendChild(g)

实际上点被移动了，并且不在路径上，我不明白为什么。

stackblitz

Answer 1

路径本身已经改变。当您获得坐标时，它们位于路径的坐标系中。您可以通过添加路径的变换来调整，例如

const cir1 = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
let path= document.getElementById('path9');

this.getPath=path;
let g = document.createElementNS('http://www.w3.org/2000/svg', 'g');

let pt = path.getPointAtLength('60');
let path_transform = path.getAttribute('transform');
g.setAttribute('transform', `translate(${pt.x},${pt.y}) ${path_transform}`);
g.appendChild(cir1)
cir1.setAttribute('r', '3');
cir1.setAttribute('fill', 'red');
cir1.setAttribute('id','123');
let svg =document.getElementById('Calque_1');
svg.appendChild(g)