Question

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

我尝试使用<textpath>引用他们画的线，但是标签的基线最终在该线的中间向下移动。 Here is a screenshot to show what I mean.

我尝试了多种方法来使用CSS和属性稍微微调文本，但是我唯一获得的成功是使用transform，如果方向不正确，通常会导致文本“溢出”线突然转弯。

我尝试过的另一种解决方案是生成一条第二条路径，该路径沿用户绘制路径的一条边延伸，并将其用于<textpath>，但我一直在努力寻找一种转换用户的方法绘制的路径指向与线条的渲染边缘相对应的点。

有人知道一种使这些方法之一起作用的方法吗？

Answer 1

我了解行需要带有一个填充该行宽度（行宽15像素）的标签。为了移动文本，我使用dy="4"

text{fill:white;stroke:none;font-family:consolas;}
path{stroke-width:15px;fill:none;}

<svg viewBox="50 150 350 150">
<defs>
<path id="path" d="M70,180Q100,330 195,225Q290,120 380,250"></path>
</defs>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path" stroke="#000000"></use>

   <text stroke="#000000" font-size="12" dy="4">
      <textPath id="tp" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path" startOffset="30%">
            just some words I wrote
      </textPath>
    </text>
  

</svg>

另一个选择是使用dominant-baseline="middle"

text{fill:white;stroke:none;font-family:consolas;}
path{stroke-width:15px;fill:none;}

<svg viewBox="50 150 350 150">
<defs>
<path id="path" d="M70,180Q100,330 195,225Q290,120 380,250" ></path>
</defs>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path" stroke="#000000"></use>

   <text stroke="#000000" font-size="12" dominant-baseline="middle">
      <textPath id="tp" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path" startOffset="30%">
            just some words I wrote
      </textPath>
    </text>
</svg>

我希望这就是你的要求。

Answer 2

您可以使用dy属性在字串中相对于字形的垂直方向垂直移动字形。

<tspan>元素上的spec章节提供了许多有关如何使用各种定位属性（dx，dy，rotate）的实际示例；我建议阅读。

path {
    fill:none;
    stroke: red;
    stroke-width: 15px;
}
text {
    font-family: sans-serif;
    font-size: 20px;
}

<svg>
  <path id="p1" d="M 25,60 60,30 H 80 V 120" />
  <text dy="-7.5px">
    <textPath href="#p1">abcdefghijklmn</textPath>
  </text>
</svg>

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

2 个答案: