1. svg基本圖形有7種
矩形 圓形
橢圓 線
折線 多邊形
路徑 其中，path可以繪製任意圖形
2. svg描邊動畫原理
svg的描邊動畫就是利用stroke-dasharray和stroke-dashoffset兩個屬性值的變化來實現的。
2.1 stroke-dasharray用來畫虛線
stroke-dasharray: 實線長度 虛線長度，可以設定多個值，奇數自動重複一遍補成偶數，即 stroke-dasharray: 10 等價於 stroke-dasharray: 10 10
2.2 stroke-dashoffset用來控制虛線的偏移
2.3 描邊動畫原理
當stroke-dasharray和stroke-dashoffset都足夠大，大於線條的長度，則stroke-dashoffset從固定值變化到0的過程，線條就會從無到伸展到其長度。如果svg線條
為path，則可以實現任意複雜圖形的描邊動畫。
2.4 下面是幾個例子
2.4.1 滑鼠hover畫直線
<svg>
<
line
id="line"
x1="30"
y1="30"
x2="300"
y2="30"
stroke-width
="20"
stroke
="red"
stroke-dasharray
="300,320"
/>
svg>
#linesvg:hover #line
2.4.2 環形進度條
<svg
width
="200"
height
="200"
viewbox
="0 0 200 200"
>
<
circle
id="circle"
cx="100"
cy="80"
r="50"
fill
="gray"
stroke-width
="5"
stroke
="green"
/>
svg>
#circlesvg:hover #circle
2.4.3 任意圖形的描邊動畫
path @keyframes dash }
2.4.4 矩形虛線框邊線滾動效果
<svg
xmlns
=""viewbox
="0 0 300 200"
>
<
rect
id="strokedrect"
x="0"
y="0"
width
="300"
height
="200"
/>
svg>
@keyframes marchingants }rect#strokedrect
參考：
SVG動畫之描邊動畫
svg描邊動畫使用stroke dasharray與stroke dashoffset兩個屬性 stroke dasharray屬性可將svg圖形的路徑斷為虛線，如下 是一條直線 如新增stroke dasharray 10 10屬性後，變為下圖 可見直線被分為了間隔為10px的虛線，若實現描邊效果...
svg相關知識和描邊動畫
xml 定義了當前的格式為 xml version 定義當前的版本 standalone 定義是否引用了外部檔案svg標籤可以設定 width height，代表了svg的寬和高，預設為 300 150 通過 path 即可設定路徑 m150 0 l75 200 l225 200 z stroke ...
描邊 深度 Outline描邊
描邊 使用兩個pass繪製兩遍模型，第一遍需要讓模型的每個頂點朝著法線方向外擴，然後使用cull front指令，剔除正面，只渲染背面。第二遍再做一遍普通的渲染，使之蓋住第一遍渲染的影象，就會產生描邊效果。材質面板 color 第二遍普通渲染模型混合顏色。main texture 第二遍普通渲染模型...