javascript - 在 CSS/SVG 中，连字字体在 `<text>` 节点中不起作用？

Question

这是 JsFiddle 上的一个演示:

http://jsfiddle.net/d0t3yggb/

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="material-icons">add add add add</div>
<svg width="100%" height="100%" viewBox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <path id="MyPath" d="M 100 200 
             C 200 100 300   0 400 100
             C 500 200 600 300 700 200
             C 800 100 900 100 900 100" />
    </defs>
    <use xlink:href="#MyPath" fill="none" stroke="red" />
    <text class="material-icons">
        <textPath xlink:href="#MyPath">add add add add</textPath>
    </text>
    <!-- Show outline of the viewport using 'rect' element -->
    <rect x="1" y="1" width="998" height="298" fill="none" stroke="black" stroke-width="2" />
</svg>

这里我使用了'Material Icons'字体，可以将字母组合“add”转换为一个字符(连字，解释为 here )，如下所示:

我用了class="material-icons"设置 font-family .这适用于 <div>节点，如上面的演示所示。

但它不适用于 <text> <svg> 内的节点, 文本/字符根本不出现..

如果我删除 class="material-icons"来自 <text> 的属性节点，文本出现:

但它不是“'Material Icons'”字体...

有人对此有想法吗？

Answer 1

IIRC SVG 文本呈现不支持连字 - 至少在某些浏览器中是这样。您将需要使用字形的实际字符代码。

看起来它们都列在 GIT repo 中. “添加”的代码是(十六进制)e145。因此，您可以使用  在文本中包含该字符。

Demo fiddle here