javascript - Svg transform 属性放置有间隙的元素

Question

我会根据进度参数将箭头放置在路径上方。

我可以放置它们。

问题是箭头放在路径旁边而不是中间。

当我用圆圈改变路径时，它们被放置在中心。

我怎样才能像圆圈一样放置没有间隙的箭头？

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,0 V20 L10,10 Z');
newpath2.setAttribute('d', 'M0,10 L10,0 V20 Z');

let progress=50;
let progress2= 300
let progress3= 400
let 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(pt2.y - pt1.y, pt2.x - pt1.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);

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

Answer 1

您只需要移动路径 d 属性中的每个点。目标是绘制居中的箭头。

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

并且 Angular 计算的复制粘贴有错误...

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= 300
let progress3= 400
let 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);

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