卡卡網(wǎng)

這篇文章主要是通過簡單的實例，介紹如何使用CSS+SVG實現(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">
                這是一個環(huán)形文字效果
             </textPath>
         </text>
    </svg>
</div>

execcodegetcode

代碼解釋

這里應用了svg路徑實現(xiàn)，創(chuàng)建一個圓形的路徑，再寫入文本，通過xlink:href屬性把它鏈到我們的圓上，設(shè)置圓形填充為none,svg標簽overflow為visible。

此代碼可實現(xiàn)環(huán)形文字和圓環(huán)文字的效果，環(huán)形文字從正上方開始，當文字較少時，便是非閉環(huán)形效果，當文字可以布滿圓周時，便是閉環(huán)形效果。

如果你想不管文字多少都是閉環(huán)形效果（文字任何時候都布滿圓周，文字少時字體之間間隔遠，文字多時字體之間間隔近），那么可以看看這個案例，純CSS實現(xiàn)環(huán)形文字效果。

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