在 HTML 文本中添加 SVG 文本并使它们看起来相同

Question

我想要 HTML 页面中的文本内容（实际上是一个句子）和 SVG 文件中的文本内容，并使它们在视觉上相同并完美组合：相同的字体、大小、对齐方式等等。

喜欢：

<p>
    This HTML content. <svg><text>And this is SVG text</text></svg>. Both look identical!
</p>

问题是我永远不会提前知道 SVG 文本的大小。

我使用 Python（我看到 here 可以通过 Pillow 解决视图框问题），但我认为一些 JS 技巧应该更适合。

有没有办法使用 SVG 文件参数或 CSS 来实现矢量和 html 文本之间近乎完美的视觉匹配？

谢谢。

Answer 1

没有。您需要提前知道文本的长度。或者用 Javascript 计算（假设你在浏览器中运行）。