图标进入 SVG 圆圈

【问题标题】：Icon into SVG Circle图标进入 SVG 圆圈
【发布时间】：2015-10-19 01:34:40
【问题描述】：

如何将图标（例如 font-awesome）输出到 SVG 元素中？

我希望它以圆圈为中心。

<svg class="svg" width=100 height=100>
    <circle cx=50 cy=50 r=25>
    </circle>    
    <i class="icon-check"></i>
</svg>

这是一个测试： http://jsfiddle.net/L2Lm3fgm/

【问题讨论】：

SVG 没有 i 元素，您必须执行此处提到的任何一种操作 - How do I include a font awesome icon in my svg?（或）使用绝对定位，也可能使用 foreignObject。

标签： html css svg

【解决方案1】：

只需找出字体-awesome 在其类中使用的字符的代码，并将该字符用作text 节点。请记住将circle 和text 节点组合在一起。

示例：

svg { 
    margin: 24px auto;
    display: block;
}
circle {
    fill: transparent;
    stroke: #f00;
    stroke-width: 2;
}
svg text#chk {
    font-family: sans-serif;
    font-size: 24px; 
    fill: #00f;
}

<svg class="svg" width=100 height=100>
    <g>
        <circle cx=50 cy=50 r=25></circle>    
        <text id="chk" x=42 y=58>&#x2713;</text>
    </g>
</svg>

小提琴示例：http://jsfiddle.net/abhitalks/L2Lm3fgm/2/

【讨论】：

感谢您的解决方案。伟大的！这就是我要找的。span>