CODEWITHSUNDEEP
javascripthtmldomsvg
infodev
infodev

Reputation: 5235

Adding circle to path using getPointAtLength() is shifted

I would add dot to a path dynamically

here's my code

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)

Actually dot is shifted and not on the path I can't figure why.

stackblitz

Upvotes: 0

Views: 129

Answers (1)

Robert Longson
Robert Longson

Reputation: 123985

The path is itself transformed. When you get the co-ordinates they are in the co-ordinate system of the path. You can adjust for that by adding the path's transform e.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)

Upvotes: 2

Related Questions