|
|
|
|
|
這篇文章主要是通過簡(jiǎn)單的實(shí)例,介紹如何使用CSS+SVG實(shí)現(xiàn)環(huán)形或圓形文字效果。
CSS代碼
body {
margin: 0;
background: #fff;
text-align: center;
}
.circlar path{
fill: none;
}
.circlar{
width: 300px;
height: 300px;
margin: 100px;
}
.circlar svg{
display: block;
overflow: visible;
}
HTML代碼
<div class="circlar">
<svg viewBox="0 0 100 100">
<path d="M 0,50 a 50,50 0 1, 1 0, 1 z" id="circle"></path>
<text>
<textPath xlink:href="#circle">
這是一個(gè)環(huán)形文字效果
</textPath>
</text>
</svg>
</div>
代碼解釋
這里應(yīng)用了svg路徑實(shí)現(xiàn),創(chuàng)建一個(gè)圓形的路徑,再寫入文本,通過xlink:href
屬性把它鏈到我們的圓上,設(shè)置圓形填充為none
,svg標(biāo)簽overflow
為visible
。
此代碼可實(shí)現(xiàn)環(huán)形文字和圓環(huán)文字的效果,環(huán)形文字從正上方開始,當(dāng)文字較少時(shí),便是非閉環(huán)形效果,當(dāng)文字可以布滿圓周時(shí),便是閉環(huán)形效果。
如果你想不管文字多少都是閉環(huán)形效果(文字任何時(shí)候都布滿圓周,文字少時(shí)字體之間間隔遠(yuǎn),文字多時(shí)字體之間間隔近),那么可以看看這個(gè)案例,純CSS實(shí)現(xiàn)環(huán)形文字效果。