进入SVG Circle的图标

Question

如何将图标(例如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/

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