如何在SVG中跟踪开放路径的一条边

我正在尝试制作一个网页，允许用户在SVG图像中绘制线条。绘图部分很好，但每行都需要带有一个标签，该标签填充行的宽度（行的宽度为15px）

我曾尝试使用

引用他们绘制的线条，但标签的基线最终会沿着线条的中间延伸

我尝试了各种方法，使用CSS和属性轻轻地移动文本，但我唯一的成功就是使用了

转换

，如果行的方向突然转向，这通常会导致文本“溢出”

我尝试过的另一种解决方案是生成沿用户绘制路径的一条边向下延伸的第二条路径，并将其用于

，但我正在努力找到一种方法，将用户绘制的路径点转换为与线的渲染边相对应的点

有人知道如何使这两种方法中的任何一种起作用吗

您可以使用该属性在相对于其方向的垂直方向上单独或一起移动字符串中的图示符

关于元素的spec章节有很多关于如何使用各种定位属性（dx、dy、rotate）的实例；我建议你读一下

路径{
填充：无；
笔画：红色；
笔画宽度：15px；
}
正文{
字体系列：无衬线；
字体大小：20px；
}

abcdefghijklmn

我知道这些线需要带有一个标签，以填充线的宽度（线的宽度为15px）。 为了移动文本，我使用

dy=“4”

text{fill:white；stroke:none；font-family:consolas；}
路径{笔划宽度：15px；填充：无；}

只是我写的一些字

谢谢您这么快的回复。我以前尝试过dy属性，但现在回想起来，我认为其他代码正在覆盖它。当我看到你的演示工作，它帮助我找到了问题。再次感谢。谢谢你，这很有帮助。我发现我的问题是，我试图将所有

元素嵌套在一个

元素中，而Edge（这是我用于测试的第一个浏览器）仅将

dy

属性应用于第一个文本节点。将它保持在每个

一个

可以让它快乐。