Javascript 使用getPointAtLength（）将圆添加到路径时发生移位

我会动态地给路径添加点

这是我的密码

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)

事实上，圆点是移动的，而不是在路径上，我不明白为什么

---

路径本身已转换。当你得到坐标时，它们在路径的坐标系中。您可以通过添加路径的变换进行调整，例如：

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)

---

这条路本身就被改变了。当你得到坐标时，它们在路径的坐标系中。您可以通过添加路径的变换进行调整，例如：

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)

事实上，没有打印任何内容（没有圆圈）a）我看到一个圆圈在错误的地方没有更改，b）在正确的地方有更改实际上没有打印任何内容（没有圆圈）a）我看到一个圆圈在错误的地方没有更改，b）在正确的地方有更改