使用从SVG字体中提取的svg.js +字形手动SVG文本呈现
我正在进行一个项目，在这个项目中，我必须在浏览器中动态创建设计资产。在过去的几个月里，我一直在使用画布来完成这个任务，但是现在有人问我是否可以直接从客户端创建基于向量的资产。
在研究了HTML5 SVG之后，我似乎能够做到这一点，在与raphael.js和svg.js玩了一圈之后，我决定我更喜欢svg.js。轻量级得多，而且< IE9支持对我来说不是问题。
我使用SVG的主要关注点是，我必须将文本呈现给我的svg，并在最终资产中使用基于文本向量的文本。不仅如此，我需要能够完美地测量文本的边界面积(到最近的像素)。在这方面，我看到两个问题：
- 仅仅使用标准的
draw.text()调用来创建<text>元素是不好的，因为这意味着我必须将字体与资产捆绑在一起，由于许可原因，这是不可能的。 - 调用
text.bbox()来获取文本元素的边界区域是不准确的。我相信它只是返回字体中最高/最低字符的高度，而不是实际使用的字符，就像getClientRect()对标准html元素所做的那样。
我看到一个解决这些问题的办法，这就是我寻求建议的地方：
我相信我可以用从SVG字体中提取的路径信息来使用draw.path()手动呈现字形。这样，我的最后一个资产将在其中包含基于矢量的字形，这些符号不与任何字体绑定，希望在绘制路径后调用bbox()比使用文本更准确。
是否有人知道是否可以使用svg.js来提取这些字形信息？或者我必须通过解析xml并从xml中提取路径信息来手动完成此操作？另外，有没有人知道在这种情况下，kerning是如何工作的？或者更好的是，您知道在不使用这种手工和复杂方法的情况下解决上述问题1和2的其他方法吗？
回答 2
Stack Overflow用户
发布于 2013-08-26 15:55:08
我以前做过一次半心半意的尝试，这确实是可能的，但不是简单的。要提取信息字体SVG字体XML，您需要.
document.querySelector("glyph[unicode=a]").getAttribute("d");这将为您提供字母a的路径。但是，此路径位于与w3c不同的坐标系中：
与SVG中的标准图形不同，在SVG中，初始坐标系统的y轴向下(参见初始坐标系统)，SVG字体的设计网格以及图形的初始坐标系统都有y轴向上指向，以便与许多流行字体格式的行业惯例保持一致。
这意味着您必须将坐标从一个系统转换为另一个系统(这本身不应该太困难)，然后将其缩放到所需的大小。
然后，您必须在第一个字母之后画下一个字母，有horiz-adv-x属性的象形文字，您也必须根据文本大小进行缩放。尽管SVG字体占到了kerning的比例，但实际上支持SVG文本的浏览器引擎中没有一个实现它，因此间距不会因字形对而变化。
根据您的具体要求，这一过程可以从容易变成噩梦。如果范围逐渐扩大，您可以最终实现一个迷你文本呈现引擎。
Stack Overflow用户
发布于 2016-05-30 05:18:28
看看https://stackoverflow.com/a/19057523/2183503。Opentype.js可用于解析OpenType和TrueType字体。
使用opentype.js，您可以获得一个可用于使用HTML5画布绘制的路径：
var font = opentype.parseFont(arrayBuffer);
var path = font.getPath("Hello, World!", {x:0, y:150, fontSize:72});
path.draw(ctx);正如答案中所说的，http://nodebox.github.io/opentype.js/的演示网站有一个活生生的例子。
https://stackoverflow.com/questions/18444179
复制相似问题
腾讯云开发者
