如何在SVG中绘制线条的一部分？

有人知道在SVG中，是否/如何在点之间绘制一条线，同时与端点保持一定距离

如果线是水平的（例如从

（40,40）

到

（100,40）

），您可以很容易地画一条线，与以下点保持约

20

的距离

<line x1="40" y1="40" x2="100" y2="40" desc="directional line" />
<line x1="60" y1="40" x2="80" y2="40" desc="actual part of line" />

此代码的演示可以在下面的

因此，在计算时，似乎可以这样做

方向线与水平线之间的角度

角度的正弦和余弦

要绘制的线的实际部分的端点

---

这是唯一的方法还是SVG能够指定行的一部分，还是有更智能、更方便的方法来实现这一点？

我不确定这是智能的还是方便的，但有一种不用脚本就可以实现的方法如下

可以使用矩形作为标记（标记起点和标记终点），并使用markerWidth和markerHeight属性以及线条的笔划宽度，可以控制标记的大小

markerWidth * stroke-width = real width

---

曾经的一种恶作剧的方式是，用一种与你的线条大小相称的圆形图案作弊。不完美，但取决于您的用例：

markerWidth * stroke-width = real width