28、环形文字

实现环形文字需要用到SVG。

<div class="cir">
    <svg viewBox="0 0 100 100">
        <path d="M 0,50 a 50,50 0 1,1 0,1 z" id="cir"></path>
        <text>
            <textPath xlink:href="#cir">this is the circle text this is the circle text</textPath>
        </text>
    </svg>
</div>

//css
.cir{
    width: 10em;
    height: 10em;
    margin: 3em auto;
}
.cir path{
    fill: none; //默认填充黑色，去掉填充
}
.cir svg{
    display: block;
    overflow: visible;  // 让超出SVG的部分显示出来
}