在SVG中堆叠字体图标

我试图在D3可视化中嵌入一些字体很棒的图标，它使用的是

SVG

。我找到了一些解决方案，让我参与其中，例如：

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

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

我已经包括了到目前为止我要做的事情，红色是所需的输出，绿色是SVG

span{
边框：薄而实的红色；
}
svg{
边框：细实绿色；
}
正文{
填充：黑色；
字体系列：“FontAwesome”；
}


如果您查看
fa-stack-1x
和
fa-stack-2x
的css，您将看到正在进行一些“手动”定位。您可以将它们转换为有效的SVG。在“外部”堆栈上：

和内部堆栈：

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

产生：


span{
边框：薄而实的红色；
}
svg{
边框：细实绿色；
}
正文{
填充：黑色；
字体系列：“FontAwesome”；
}



Hmm好的-所以总是会有一些手动定位。那么，我想，有没有一种方法可以重复使用其中的一些内容（或者我必须转移到我自己的CSS中），因为我不希望这种东西使用内嵌样式？如何从图标（例如电话）的名称中获取代码

？@elsoufy-Unicode可以在这里找到：
text-anchor="middle" alignment-baseline="middle"