开发中看到了类似于
这种的css效果,记录一下实现方法
1、HTML结构
<svg viewBox="0 0 100 100">
<path d="M 0,50 a 50,50 0 1,1 0,1 z" id="circle" />
<text>
<textPath xlink:href="#circle">使用svg实现环形文本</textPath>
</text>
</svg>
2、css样式
.circular{
width: 200px;
height: 200px;
margin: 100px;
}
.circular path { fill: none; }
.circular svg { display: block; overflow: visible; }