SVG - 如何在正确的位置打破一条长线？

Question

我在使用 SVG 时遇到问题。我希望用户能够编写一些文本，并且从一定长度开始，它会自动换行。

现在它是 HTML，它可以工作。我想知道 SVG 是否存在此功能

非常感谢

Answer 1

目前 SVG 的 <text> 元素上没有允许自动换行的属性。

包装到tspans

但是，您可以使用来自 MDN WebDocs 的各种 <tspan> elements 将文本包装在文本元素中：

SVG 元素在一个元素或另一个元素中定义了一个潜文本。它允许根据需要调整该子文本的样式和/或位置。

书籍

tspan 方法在书中也有深入的解释：

• Amelia Bellamy-Royds (2015)：SVG 文本布局，Chapter 4. Multiline SVG Text，O'Reilly，ISBN：9781491933824

提案正在进行中

2013 年 W3C wiki 中的一个页面建议：Proposals for Wrappping Text。

Answer 2

您可以通过在路径上绘制文本来伪造某些东西，但看起来仍然很难看，并且无法控制空格和换行符

<style>
  svg {
    background: lightgreen
  }
</style>
<svg viewbox="0 0 400 150">
  <path id="P" pathLength="100" d="M10 25h380M10 75h380M10 125h380" stroke="green"></path>
  <text>
    <textPath href="#P" startoffset="0" text-anchor="start" dominant-baseline="middle"
              fill="red" font-size="50px">Hello, what a wonderful SVG world this is</textPath>
  </text>
</svg>