Svg Transform Attribute Is Placing Elements With A Gap

I would place arrows above a path according to a progression parameter. I'm able to place them. The problem is that arrows are placed beside the path and not on the middle. When I

Solution 1:

You just need shift every point in path d attribute. goal is to draw arrows centered.

newpath.setAttribute('d', 'M0,-10 V10 L10,0 Z');
newpath2.setAttribute('d', 'M0,0 L10,-10 V10 Z');

and there are mistake in copy-paste of angle calculations...

let svg= document.getElementsByTagName('svg')[0]
let newpath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
let newpath2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
let circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');

newpath.setAttribute('d', 'M0,-10 V10 L10,0 Z');
newpath2.setAttribute('d', 'M0,0 L10,-10 V10 Z');

let progress=50;
let progress2= 300let progress3= 400let position = document.getElementById('s3')
let pt1 = position.getPointAtLength(progress);
let pt2 = position.getPointAtLength(progress + 0.1);
let pt12 = position.getPointAtLength(progress2);
let pt22 = position.getPointAtLength(progress2 + 0.1);
let ptcircle= position.getPointAtLength(progress3);
let a = (Math.atan2(pt2.y - pt1.y, pt2.x - pt1.x) * 180) / Math.PI;
let a2 = (Math.atan2(pt22.y - pt12.y, pt22.x - pt12.x) * 180) / Math.PI;
newpath.setAttribute('transform', `translate(${pt1.x},${pt1.y})rotate(${a})`);
newpath2.setAttribute('transform', `translate(${pt12.x},${pt12.y})rotate(${a2})`);
circle.setAttribute('cx', ptcircle.x);
circle.setAttribute('cy', ptcircle.y);
circle.setAttribute('r', 6);

svg.appendChild(newpath);
svg.appendChild(newpath2);
svg.appendChild(circle);

<svgviewBox = "0 0 800 300"version = "1.1"><pathid = "s3"d = "M10.51,27.68c202.42,340.08,200.57-4.6,300,15.67"fill = "none"stroke = "green"stroke-width = "3"/></svg>