【问题标题】:SVG - How to break line a long line at correct place?SVG - 如何在正确的位置打破一条长线?
【发布时间】:2021-09-16 21:15:54
【问题描述】:

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

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

非常感谢

【问题讨论】:

标签: svg text


【解决方案1】:

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

包装到tspans

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

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

书籍

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

提案正在进行中

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

【讨论】:

    【解决方案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>

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2011-01-04
      • 1970-01-01
      • 1970-01-01
      • 2023-03-11
      • 2017-01-25
      • 2011-08-21
      • 1970-01-01
      • 2021-05-10
      相关资源
      最近更新 更多