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

Question

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

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

这些是一个很好的起点，但似乎只适用于基本角色。然而，我想做的是使用一些很棒的字体堆叠功能来制作复合图标。有没有人曾经尝试过在 SVG 中这样做？还是这根本不可能？

当我试图将一个示例放在一起时，我不得不将字符包含在 2 个不同的文本元素中（我真的希望它们在一个元素中），我觉得我现在处在一个完整的世界中手动调整大小或定位自己的痛苦。有没有人对如何实现这一目标有可能的解决方案？

我已经包括了到目前为止我所要做的，red 是所需的输出，green 是 SVG。

span { 
 border: thin solid red;   
}

svg {
    border: thin solid green;
}

text {
    fill: black;
    font-family: 'FontAwesome';
}

<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>

Answer 1

如果您查看 fa-stack-1x 和 fa-stack-2x 的 css，您会发现正在进行一些 "manual" 定位。您可以将它们翻译成有效的 SVG。在 "outer" 堆栈上：

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

和内部堆栈：

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

产生：

span { 
 border: thin solid red;   
}

svg {
    border: thin solid green;
}

text {
    fill: black;
    font-family: 'FontAwesome';
}

<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>

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

Stacking font-awesome icons within SVG

svg

d3.js

font-awesome