卡卡網(wǎng)

這篇文章主要是通過簡(jiǎn)單的實(shí)例，介紹如何使用CSS+SVG實(shí)現(xiàn)環(huán)形或圓形文字效果。

demodownload

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>

execcodegetcode

代碼解釋

這里應(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)形文字效果。

標(biāo)簽: SVG  css  css3  環(huán)形文字效果  圓環(huán)文字效果