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

Question

这是 JsFiddle 上的演示：

<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"转换为一个字符（连字，解释），如下图：

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

但它对<svg>中的<text>节点不起作用，text/characters根本没有出现..

如果我从 <text> 节点中删除 class="material-icons" 属性，将出现文本：

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

有人对此有想法吗？

Answer 1

下载后使用css导入字体试试

@font-face {
font-family: material icons;
src: url(material-icons.ttf);
}

然后将您的文本标签内容更改为

<text font-family="material-icons" font-size="20">
<textPath xlink:href="#MyPath">
 add add add add
</textPath>
 </text>

Answer 2

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

看起来它们都列在 GIT repo 中。 "add" 的代码是（十六进制）e145。因此，您可以使用 .

在文本中包含该字符

Demo fiddle here

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

In CSS/SVG, ligature font doesn't work in `<text>` nodes?

html

javascript

css

fonts

svg