进入SVG圈子的图标

本文介绍了进入SVG圈子的图标的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何将图标(例如超棒字体)放入SVG元素?

How do I out an icon (e.g. font-awesome) into an SVG element?

我希望这以圆圈为中心.

I want that this is centered in the circle.

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

推荐答案

只需找出该类中正在使用的font-awesome字符的代码，然后将该字符用作text节点即可.请记住将circle和text节点分组在一起.

Just find out the code for the character font-awesome is using in its class, and use that character as a text node. Remember to group the circle and the text node together.

示例:

Example:

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/

这篇关于进入SVG圈子的图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！