Question

我试图在使用SVG的D3可视化中嵌入一些字体真棒图标。我找到了一些让我参与其中的解决方案，例如：

How do I include a font awesome icon in my svg?
Adding FontAwesome icons to a D3 graph

这是一个很好的起点，但似乎只适用于基本角色。然而，我想要做的是使用一些字体 - 令人敬畏的堆叠功能来制作复合图标。有没有人试过在SVG之前做过这个？或者这根本不可能？

当我试图将一个例子放在一起时，我必须将这两个字符包含在两个不同的文本元素中（我真的希望它们在一个内部）并且我觉得我现在在关于手动调整大小或定位自己的整个痛苦世界。有没有人可以决定如何实现这一目标？

我已经包含了目前为止所处的位置，红色是所需的输出，绿色是SVG。

＆＃13;

span { 
 border: thin solid red;   
}

svg {
    border: thin solid green;
}

text {
    fill: black;
    font-family: 'FontAwesome';
}

＆＃13;

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<span class="fa-stack fa-lg"> 
    <i class="fa fa-circle-o fa-stack-2x"></i>
    <i class="fa fa-info fa-stack-1x"></i>
</span>

<svg width="100" height="100">
    <text x="50" y="50">&#xf10c</text>
    <text x="50" y="50"">&#xf129</text>
</svg>

＆＃13;

Answer 1

如果您查看fa-stack-1x和fa-stack-2x的CSS，您会看到有一些＆＃34;手册＆＃34;定位继续。您可以将它们转换为有效的SVG。在＆＃34;外部＆＃34;堆栈：

text-anchor="middle" style="font-size: 2em" alignment-baseline="middle"

内堆：

text-anchor="middle" alignment-baseline="middle"

产地：

＆＃13;

span { 
 border: thin solid red;   
}

svg {
    border: thin solid green;
}

text {
    fill: black;
    font-family: 'FontAwesome';
}

＆＃13;

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<span class="fa-stack fa-lg"> 
    <i class="fa fa-circle-o fa-stack-2x"></i>
    <i class="fa fa-info fa-stack-1x"></i>
</span>

<svg width="100" height="100">
    <text x="50" y="50" text-anchor="middle" style="font-size: 2em" alignment-baseline="middle">&#xf10c</text>
    <text x="50" y="50" text-anchor="middle" alignment-baseline="middle" >&#xf129</text>
</svg>

＆＃13;

在SVG中堆叠字体很棒的图标

1 个答案: