javascript - 使用 svg.js + 从 SVG 字体提取的字形手动渲染 SVG 文本

Question

我正在开发一个项目，我必须在浏览器中动态创 build 计资源。在过去的几个月里，我一直使用 Canvas 来执行此操作，但现在有人问我是否可以直接从客户端创建基于矢量的资源。

在研究了 HTML5 SVG 之后，我似乎可以做到这一点，并且在尝试了 raphael.js 和 svg.js 之后，我决定我更喜欢 svg.js。更加轻量级，并且 < IE9 支持对我来说不是问题。

我对使用 SVG 的主要担忧是，我必须将文本渲染到我的 svg，并且基于文本向量并在最终资源中可用。不仅如此，我需要能够完美地测量文本的边界区域(到最近的像素)。在此我看到两个问题:

• 仅使用标准draw.text()调用创建 <text> element 不好，因为这意味着我必须将字体与资源捆绑在一起，但由于许可原因，这是不可能的。

• 调用 text.bbox()当涉及到高度时，获取文本元素的边界区域是不准确的。我相信它只是返回字体中最高/最低字符的高度，而不是实际使用的字符，就像 getClientRect() 一样。与标准 html 元素一起使用。

我看到了一个可以解决这些问题的解决方案，这就是我寻求建议的地方:

我相信我可以使用 draw.path() 手动渲染字形包含从 SVG 字体中提取的路径信息。这样我的最终 Assets 将包含基于矢量的字形，这些字形不与任何字体绑定(bind)，并希望调用 bbox()绘制路径后比使用文本更准确。

有谁知道是否可以使用 svg.js 提取任何字形信息？或者我必须通过解析 xml 并从中提取路径信息来手动执行此操作？还有人知道在这种情况下字距调整如何工作吗？或者更好的是，您是否知道解决上述问题 1 和 2 的任何其他方法，而无需执行此手动和复杂的方法？

Answer 1

我曾经半心半意地尝试过，这确实是可能的，但并不简单。要提取 SVG 字体 XML 的字体信息，您需要...

document.querySelector("glyph[unicode=a]").getAttribute("d");

这将为您提供字母a的路径。但是，该路径位于与 w3c 不同的坐标系中:

Unlike standard graphics in SVG, where the initial coordinate system has the y-axis pointing downward (see The initial coordinate system), the design grid for SVG fonts, along with the initial coordinate system for the glyphs, has the y-axis pointing upward for consistency with accepted industry practice for many popular font formats.

这意味着您必须将坐标从一个系统转换为另一个系统(这本身不应该太难)，然后将其缩放到所需的大小

然后，您必须在第一个字母之后绘制下一个字母，字形的 horiz-adv-x 属性还必须根据文本大小进行缩放。尽管 SVG 字体会考虑字距调整，但实际上，支持 SVG 文本的浏览器引擎都没有实现它，因此间距不会根据字形对而变化。

根据您的具体要求，这个过程可能会很简单，也可能会很糟糕。如果范围扩大，您最终可以实现一个小型文本渲染引擎。