如何在SVG文本中自动换行?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (213)

我想<text>在SVG中显示一个<rect>与HTML文本填充<div>元素相同的方式自动换行到容器的东西。有没有办法做到这一点?我不想用<tspan>s 来温和地定位线条。

提问于
用户回答回答于

文本换行不是SVG1.1的一部分,它是当前实现的规范。应该通过<foreignObject/>元素使用HTML 。

<svg ...>

<switch>
<foreignObject x="20" y="90" width="150" height="200">
<p xmlns="http://www.w3.org/1999/xhtml">Text goes here</p>
</foreignObject>

<text x="20" y="20">Your SVG viewer cannot display html.</text>
</switch>

</svg>
用户回答回答于

这是一个替代方案:

<svg ...>
  <switch>
    <g requiredFeatures="http://www.w3.org/Graphics/SVG/feature/1.2/#TextFlow">
      <textArea width="200" height="auto">
       Text goes here
      </textArea>
    </g>
    <foreignObject width="200" height="200" 
     requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
      <p xmlns="http://www.w3.org/1999/xhtml">Text goes here</p>
    </foreignObject>
    <text x="20" y="20">No automatic linewrapping.</text>
  </switch>
</svg>

注意尽管foreignObject可能被报告为支持该特征字符串,但不能保证可以显示HTML,因为SVG 1.1规范并不要求这样做。目前没有用于html-in-foreignobject支持的特征字符串。但是,它在许多浏览器中仍然受到支持,因此未来可能会需要它,可能会使用相应的特征字符串。

请注意,SVG Tiny 1.2 中的'textArea'元素支持所有标准svg特性,例如高级填充等,可以指定宽度或高度为自动,这意味着文本可以在该方向上自由流动。ForeignObject充当裁剪视口。

扫码关注云+社区

领取腾讯云代金券