我正在开发一个项目，我必须在浏览器中动态创建设计资源。在过去的几个月里，我一直在使用canvas进行此操作，但现在我被问到是否可以直接从客户端创建基于矢量的资产。
在调查HTML5 SVG后，似乎我可以做到这一点，在玩了raphael.js和svg.js后，我觉得我更喜欢svg.js。更轻巧，并且＆lt; IE9支持对我来说不是问题。
我对使用SVG的主要担心是我必须将文本呈现给我的svg，并在最终资产中提供基于文本向量的文本向量。不仅如此，我还需要能够完美地测量文本的边界区域（到最近的像素）。在这里我看到2个问题：
仅使用标准draw.text()调用来创建<text>元素并不好，因为这意味着我必须将字体与资产捆绑在一起，由于许可原因，这是不可能的。< / p>
调用text.bbox()来获取文本元素的边界区域在高度方面是不准确的。我相信它只返回字体中最高/最低字符的高度，而不是实际使用的字符，就像getClientRect()对标准html元素一样。
我看到了一个可以解决这些问题的解决方案，这就是我在寻找建议的地方：
我相信我可以使用draw.path()手动渲染字形，并从SVG字体中提取路径信息。这样我的最终资产中就会有基于矢量的字形，这些字形与任何字体无关，并且希望在绘制路径后调用bbox()比使用文本更准确。
有谁知道是否可以使用svg.js提取任何此字形信息？或者我必须通过解析xml并从中拉出路径信息来手动执行此操作吗？也有人知道在这种情况下字距调整是如何工作的吗？或者甚至更好地了解解决问题的任何其他方式1＆amp; 2上面没有做这个手册和复杂的方法？
答案 0 :(得分：3)
我之前已经采取了半心半意的尝试，这确实是可能的，但不是直截了当的。要提取信息字体，需要使用SVG字体XML ...
document.querySelector("glyph[unicode=a]").getAttribute("d");
这将为您提供字母a的路径。但是，此路径位于不同的坐标系中，来自w3c：
与SVG中的标准图形不同，它是初始坐标系 y轴指向下方（参见初始坐标系）， SVG字体的设计网格以及初始坐标 字形系统，y轴指向上方以保持一致性 许多流行的字体格式都有公认的行业惯例。
这意味着您必须将坐标从一个系统转换为另一个系统（这本身不应该太难），然后将其缩放到所需的大小
然后你必须在第一个字母之后绘制下一个字母，字形的horiz-adv-x属性你必须根据文字大小进行缩放。即使SVG字体考虑了字距调整，实际上没有支持SVG Text的浏览器引擎实现它，因此间距不会根据字形对而变化。
根据您的具体要求，此过程可以从简单到噩梦。如果范围不断扩大，您最终可以实现一个迷你文本渲染引擎。
答案 1 :(得分：0)
看看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/的演示网站有一个实例。