使用 Sharp 的 SVG 多行文本换行答案

【问题标题】：SVG Multiline Text Wrapping With Sharp使用 Sharp 的 SVG 多行文本换行
【发布时间】：2021-09-13 09:49:45
【问题描述】：

我必须使用 sharp.js 从包含动态文本的 SVG 生成 PNG。我的问题是，如何在 SVG 元素中包装长文本并生成清晰的 PNG？此外，如果它的高度和宽度太长，它应该以 3 个点 (...) 结尾。

我尝试了以下一种，但没有效果。

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <rect fill="#CEE" width="100%" height="100%" />
    <foreignObject x="20" y="90" width="150" height="200">
      <p xmlns="http://www.w3.org/1999/xhtml">This is a very very looooooooooooong text, it should have a line break on the end and continue on the next line, then. if it is too long it should end with ...</p>
    </foreignObject>
</svg>

然后

sharp(Buffer.from(svg))
    .png()
    .toFile(fileName)
    .catch(console.log)

【问题讨论】：

标签： node.js svg png word-wrap sharp

【解决方案1】：

<foreignObject> 是一种将 HTML（通常）嵌入到 SVG 中的方法。它需要一个 HTML 渲染引擎。所以实际上只在浏览器中支持。 Sharp 不太可能包含 HTML 渲染引擎。所以你需要用另一种方式来做。

SVG 没有自动换行。 至少当前版本的 SVG (1.1) 没有。 SVG 2 有 the inline-size property，但很少有 SVG 渲染器支持，但 AFAIK。

如果您处于正确支持 SVG DOM 的环境中，则可以通过添加 <text> 元素并测量其长度来完成。然后迭代地添加或删除单词或字母，以确定在哪里换行。

【讨论】：

好的，你。基本上，我必须找到或编写自己的渲染器来处理这个问题。
如果您无法使用上述选项，那么可以。您可能必须使用另一种非 SVG 方法来布置文本，然后使用该过程中的数据来生成 SVG <text> 元素。