如何通过 unicode 属性获取 SVG 字体中的字形答案

【问题标题】：How to pick up glyphs in SVG fonts by their unicode attribute如何通过 unicode 属性获取 SVG 字体中的字形
【发布时间】：2016-10-11 06:54:00
【问题描述】：

我正在尝试从专为音乐雕刻而设计的 SVG 字体中提取特定字符。音乐字体通常包含大量字符（> 3500），但我只需要其中的一小部分，以便以压缩形式缓存字形以便快速访问。

典型的字形节点通常如下所示：

<glyph unicode="&#xe050;" horiz-adv-x="621" d="...">

因此，我需要通过其“unicode”属性获取所需的字形。我认为应该可以使用 querySelector 或 jQuery。

我完全不明白选择器应该是什么样子。以下（非常幼稚的）选择器不起作用：

var myGlyph = document.querySelector("glyph[unicode=e050]");

在这种情况下更复杂的是，字形具有多个 unicode 代码点：

<glyph unicode="&#xe058;&#xe880;" horiz-adv-x="671" d="...">

我不明白我需要为这两种情况创建合适的选择器。我是这方面的初学者，对现有文档中的选择器语法并不完全了解。

有人能指出我正确的方向吗？

非常感谢您！

【问题讨论】：

【解决方案1】：

我已经找到了上述问题的解决方案。我会在下面贴出来，希望对你有用。

第一种情况的选择器如下所示：

var myGlyph = document.querySelector('glyph[unicode="\ue050"]');

在第二种情况下，只需连接 unicode 代码点：

var myGlyph = document.querySelector('glyph[unicode="\ue058\ue880"]');

【讨论】：