本文主要想談一談前端關(guān)于漸變圓環(huán)的制作，效果圖如下：
注意：部分iphone 不支持css3旋轉(zhuǎn)大于等于90度，故頁面中所需旋轉(zhuǎn)的均改為了89deg；
SVG有兩種方式寫漸變的：線性漸變linearGradient或放射性漸變r(jià)adialGradient，但是卻不能通過這兩種方式實(shí)現(xiàn) 角度漸變?（當(dāng)然，如果有人能實(shí)現(xiàn)角度漸變秃症，非常歡迎推薦）
我是通過借助SVG能填充圖片的功能實(shí)現(xiàn)候址，為實(shí)現(xiàn)上述漸變圓環(huán)，我的填充圖如下：
關(guān)于SVG如何給路徑填充背景圖在此就不再細(xì)說种柑，可以查看教程宗雇，相關(guān)教程有很多
直接上代碼：
<svg width="100%" height="100%" viewbox="0 0 160 160"></svg>
如果是適配手機(jī)，需要等比例縮放莹规，這就需要設(shè)置viewbox赔蒲，表示svg的左上角坐標(biāo)和寬高
<defs>
<pattern id="fill-img" patternUnits="userSpaceOnUse" width="160" height="160">
<image class="img-transform" xlink:
? ? ? ? ? ? ?x="0"y="0"width="160"height="160">
</image>
</pattern>
</defs>
其中的樣式 定義如下：
.img-transform{
? ? ? ? transform:rotate(89deg);
? ? ? ? transform-origin:50%50%;
}
背景圖已經(jīng)定義完成，接下來就是如果繪制圓環(huán)并使用背景圖了良漱，代碼如下：
<circle class="circle-transform mapSvgDraw delay2-0" fill="none" stroke="url(#fill-imgs4)" stroke-width="15" stroke-miterlimit="1" cx="80" cy="80" r="72" stroke-dasharray="380 1000" stroke-dashoffset="380" stroke-linecap="round"/>
stroke-dasharray： 指定短劃線和缺口的長度舞虱，如果提供了奇數(shù)個值，則這個值的數(shù)列重復(fù)一次母市，從而變成偶數(shù)個值
stroke-dashoffset：指定了dash模式到路徑開始的距離矾兜，一般通過此值形成動畫
其中的circle-transform 定義的是當(dāng)前圓環(huán)所要旋轉(zhuǎn)或位移的量，樣式如下：
.circle-transform{
? ? ? ? transform:translate3d(-1px,-1px,0)rotate(-89deg);
? ? ? ? transform-origin:50%50%;
}
不管是圖片或圓環(huán)的樣式定義患久，都可以根據(jù)自己的需要去定義
到目前為止椅寺，圓環(huán)已成，如果需要添加動畫效果蒋失，可參考以下代碼
.mapSvgDraw{
//?stroke-dasharray:?1000;
//?stroke-dashoffset:?1000;
? ? ? ? ?-webkit-animation:?mapSvgDraw1slinearboth;
? ? ? ? ? animation:?mapSvgDraw1slinearboth;
}
@-webkit-keyframes mapSvgDraw?{
? ? ? ? 0%{}
? ? ? ? 100%{
? ? ? ? ? ? ? ? ?stroke-dashoffset:0;
? ? ? ? ?}
}
@keyframes mapSvgDraw{
? ? ? ? ? 0%{}
? ? ? ? ? 100%{
? ? ? ? ? ? ? ? ? ?stroke-dashoffset:0;
? ? ? ? ? ?}
}
以上返帕，即為所有代碼，如有不懂篙挽，可查閱相關(guān)資料
參考文獻(xiàn)：
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Patterns
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/stroke-dashoffset
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/stroke-dasharray
文檔信息
版權(quán)聲明：自由轉(zhuǎn)載-非商用-非衍生-保持署名
發(fā)表日期：2017年3月13日
