是的，看標題能繞暈你。
那就通俗點，說點人說的話吧。就是下面這貨：

漸變描邊
這種圖標，以一眾UI設計師多年深厚的功底，打眼一看就知道，一定是旋轉的loading圖標。小伙伴稱之為什么呢？漸變描邊嘛？之所以這么拗口的起了個角度漸變描邊這種鬼畜的名字，是因為photoshop的漸變描邊有下面三種效果

最像角度漸變對不對？好了，名字介紹到此結束，進入正題。
這張圖片，用ps來做，分分鐘的事情對不對？然后CSS3一個旋轉動畫屬性就好啦，但是，作為深中SVG之毒的假UI來說，這樣絕不能滿足！一定要用SVG來實現，然后各種尺寸一個圖標360度無死角適配。
好了，說做就做。

1.AI繪制

既然用SVG，就少不了好基友AI了，我們都知道AI是可以導出一切SVG的，AI里面怎么完成，我不專業，只想到了一個簡單的方法，先做一個混合，然后圓周（開放路徑）替換混合軸來完成。其他設計師小伙伴有其他更好的方法都可以。

AI中制作方法

為了讓漸變效果更自然，我混合選項那里用的是指定的距離1px。好了，完成，導出SVG，加animation設置，轉起來，鞠躬，謝幕，教程到此結束（你特么是在逗我嘛？）。
等等，不要走，回來，來來來，你看看，你的SVG有多大。

SVG

37K，天雷滾滾，我導出png的話才只有5K多點。說好的代碼實現更簡單呢？！

暫時壓制住狂躁的心，然后來看一下SVG代碼。
我隨隨便便貼上一點看一下：

里面是N多個<circle>來組成的。
嗯，也不是太多，五百多個而已嘛。回想一下我們在AI中使用替換混合軸來實現這種效果的原理，然后把指定距離變大一些（我由1px改成了10px），看一下效果

AI是如何實現這種漸變效果的一目了然，很多圓一個個拼接起來，顏色逐漸變化，這才從視覺上組成了一個圓的類似角度漸變的描邊效果。
當然了，這么蛋疼的SVG是不能用的，說好的好維護呢？回頭要改個顏色我去源文件改五百多個色值？還不是要AI重新生成，重新導出？那到底能不能破？

2.變通的實現方法

CSS3的漸變支持線性漸變和徑向漸變，所以，想個辦法，能不能利用基礎的漸變來生成這個圖形？在死死的盯住這個圖長達五分鐘之久后，發現這個圖拋棄頂部圓形不算，似乎是一分為二的兩個線性漸變拼成的。

既然是線性漸變，那我們可以放心大膽的玩起來了，首先，我在AI中繪制了一個圓環，然后擴展描邊，圖形從中分割開，生成兩個半圓環。

我們需要的就是這兩個半圓環的<path>路徑。
當然了，對于非設計師的玩法也很簡單（我們暫且稱之為開發人員玩法），一個大圓復制兩份，利用內部的小一些的同心圓蒙版產生圓環，然后兩個圓環一個加左半邊蒙版，一個加右半邊蒙版，我懶，直接借助AI導出路徑最喜歡。
得到兩個半圓環路徑之后，現在有兩個方法可以選擇，先來看第一種：直接給兩個半圓進行線性漸變疊加，然后補充上頂部的圓形

似乎還不錯，看看導出的SVG（我簡化了一下）

<svg> <style type="text/css"> .st1{fill:url(#SVGID_1_);} .st2{fill:url(#SVGID_2_);} .st3{fill:#4886CD;} </style> <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="150" y1="0" x2="150" y2="200"> <stop offset="0" style="stop-color:#4886CD"/> <stop offset="1" style="stop-color:#9DBFE4"/> </linearGradient><!--深藍到淺藍的漸變--> <path class="st1" d="M100,0v20c44.1,0,80,35.9,80,80c0,44.1-35.9,80-80,80v20c55.2,0,100-44.8,100-100S155.2,0,100,0z"/> <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="50" y1="0" x2="50" y2="200"> <stop offset="0" style="stop-color:#FFFFFF"/> <stop offset="1" style="stop-color:#9DBFE4"/> </linearGradient><!--白色到淺藍的漸變--> <path class="st2" d="M20,100c0-44.1,35.9-80,80-80V0C44.8,0,0,44.8,0,100s44.8,100,100,100v-20C55.9,180,20,144.1,20,100z"/> <circle class="st3" cx="100" cy="10" r="10"/> </svg>復制代碼

代碼比較清晰，AI定義了兩個漸變“SVGID_1_”和“SVGID_2_”，然后兩個半圓環路徑去調用不同的漸變。
這時，我們只要在CSS樣式里加上下面這段定義旋轉動畫的代碼：

@keyframes load{ 0%{transform:rotate(0)} 100%{transform:rotate(-360deg)} } #load{animation:load 1s linear infinite; transform-origin:center center;} 復制代碼

然后把組成圖形的<path>和<circle>都用一個<g>標簽包起來，然后<g id="load">來調用動畫，（最后會放最終代碼的，這里不再羅里吧嗦了），好啦，轉起來，走你。

速度、方向神馬的不滿意再調整，都是小事情。然后看看文件大小，1.4K，減少了35K，似乎不起眼，但是，當用另外一種表達方法，縮小到原來的3.7%，減少了96%的體積，嘖嘖嘖，是不是要上天？而且SVG代碼里一共三個色值，隨時隨地方便更換！
還沒完，作為一枚有理想有追求的loading圖標，這樣就算完了嘛？我還沒說方法2呢！

3.漸變優化

近看這個圖標會發現兩個協調不好的地方，一個是頂部的圓和背景圓環交接處，一個是兩個半圓環交界處，出現的原因很簡單，我用漸變填充的圓形來表示一下。

也就是說，雖然那個一堆<circle>形成的漸變環很魔性，但是按照圓周弧形漸變，而我們上面一分為二的漸變則是垂直方向的漸變，好了，說了一堆，到底能不能破？能！下面跟著我來做一個障眼法。

我們都知道，即使在軟件里，也是可以任意修改漸變色的停靠點的，如上圖所示，我把兩個圓環的基礎的線性漸變進行了拆分，左側分為L1（白→淺藍）漸變區和L2（淺藍填充）純色區，右側分為R1（藍色填充）純色區、R2（藍→淺藍）漸變區和R3（淺藍填充）純色區，如此拆分的目的就是為了讓原來圖標頂部的小圓形對應的底部圓環所在區域為和其相同的純色，同理，底部也都是純色填充，實現左半環和右半環的無縫拼接。
方法有了，實際操作中，零代碼基礎的UI們可以調節AI中漸變來實現，有一丟丟SVG基礎的，可以直接通過上面SVG漸變對應的代碼

<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="150" y1="0" x2="150" y2="200"> <!--右半圓環的漸變--> <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="50" y1="0" x2="50" y2="200"> <!--左半圓環的漸變-->復制代碼

調整y值（垂直方向，Y值即停靠點位置），比如這里，我的小圓的半徑=10，即環徑為20，那么左側對應y1="0",y2="180",右側對應y1="20",y2="180"。
調整后效果如下：

調整漸變停靠點后的圓環
完美！
好了，下面轉起來

收工！
既然騙眾位客官進來了，那就放上通用代碼和注釋吧，需要什么顏色，直接調整就可以了，至于尺寸嘛，上網搜一篇關于SVG的viewBox和width、height的關系，各種尺寸無壓力，或者直接交給開發人員就好了嘛。 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" height="200px" viewBox="0 0 200 200"xml:space="preserve"> <!--#4886CD為深色值 #9DBFE4為中間值 可以隨意修改--> <style type="text/css"> .left{fill:url(#left);} .right{fill:url(#right);} .top{fill:#4886CD;} @keyframes load{ 0%{transform:rotate(0)} 100%{transform:rotate(-360deg)} } #load{animation:load 1s linear infinite; transform-origin:center center; } </style> <g id="load"> <linearGradient id="right" gradientUnits="userSpaceOnUse" x1="150" y1="20" x2="150" y2="180"> <stop offset="0" style="stop-color:#4886CD"/> <stop offset="1" style="stop-color:#9DBFE4"/><!--藍到淺藍漸變--> </linearGradient> <path class="right" d="M100,0v20c44.1,0,80,35.9,80,80c0,44.1-35.9,80-80,80v20c55.2,0,100-44.8,100-100S155.2,0,100,0z"/><!--右半圓環--> <linearGradient id="left" gradientUnits="userSpaceOnUse" x1="50" y1="0" x2="50" y2="180"> <stop offset="0" style="stop-color:#FFFFFF"/> <stop offset="1" style="stop-color:#9DBFE4"/><!--淺藍到白色漸變--> </linearGradient> <path class="left" d="M20,100c0-44.1,35.9-80,80-80V0C44.8,0,0,44.8,0,100s44.8,100,100,100v-20C55.9,180,20,144.1,20,100z"/><!--左半圓環--> <circle class="top" cx="100" cy="10" r="10"/> </g> </svg>復制代碼

比如你想來個熱情洋溢的紅黃色系的

直接把三個色值套進代碼里，分別替換深色，中間色和淺色。
得到效果如下

或者紫色

套色值

以及粉色小清新

o(￣︶￣)o

總結

以上是生活随笔為你收集整理的一枚角度渐变描边 loading 图标的 SVG 修炼之路的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。