如何在 SVG 中包含引导字形

Question

我遵循了这个SO答案在我的SVG中包含字形，但它不起作用。

这是我想要将图标实现到的 SVG 代码：

  <text
    ng-attr-x="{{node.width/2}}"
    ng-attr-y="{{node.height/2+5}}"
    text-anchor="middle"
    ng-attr-fill="{{(node.activity.act_task==3 || node.activity.act_task==4)?'#FFFFFF':'#000000';}}">
    <tspan x="130" dy="0em">&#e003</tspan>
    <tspan x="130" dy="1.2em" ng-show="node.activity.act_type == 1 && node.height > 30"><a target="_blank" href="http://{{node.activity.act_info_url}}" style="text-decoration: underline">{{node.activity.act_info}}</a></tspan>
  </text>

我添加到我的 css 文件中：

svg text{
  font-family: 'Glyphicons Halflings';
}

但这不起作用，它只是将

&#e003

显示为文本，而不是我后面的搜索图标，后面是

glyphicon-search

图标。 我也尝试过

/e003

&

&e003

和

#e003

但没有任何运气。

有没有办法可以将字形添加到 svg 组件中？

Answer 1

您的实体有误。

实体默认为十进制，而不是十六进制。如果要使用十六进制，则必须在

x

后面加上

#

。

此外，实体必须以分号结尾。 所以你应该使用的是：



Answer 2

我知道 Paul LeBeau 的回答被标记为解决方案，但这对我有用：

<style>
    svg text {
        font-family: 'Glyphicons Halflings';
    }
</style>

 <g>
    <text x="130" dy="0em">&#xe003;</text>
 </g>