SVG变换属性将元素之间留有空隙 [英] Svg transform attribute is placing elements with a gap

问题描述

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

I would place arrows above a path according to a progression parameter.

我可以放置它们.

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

The problem is that arrows are placed beside the path and not on the middle.

当我用圆圈更改路径时，它们会放置在中心.

When I change path with circles , these are placed in center.

如何放置没有象圆一样的间隙的箭头?

How can I place arrows without gap like circle ?

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>

推荐答案

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

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= 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>

这篇关于SVG变换属性将元素之间留有空隙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！