javascript - 如何通过 unicode 属性获取 SVG 字体中的字形

Question

我正在尝试从专为音乐雕刻设计的 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="...">

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

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

非常感谢您!

Answer 1

我已经找到了上述问题的解决方案。我会在下面发布它，希望它会有用。

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

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

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

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