用了那么久的 SVG，你還沒有入門嗎

Springboot3+微服務(wù)實戰(zhàn)12306高性能售票系統(tǒng)

download：https://www.51xuebc.com/thread-544-1-1.html

其真實大局部的項目中都有 直接 或 間接 運用到 SVG 和 Canvas，但是在大多數(shù)時分我們只是選擇 簡單理解 或 直接跳過，這有問題嗎？沒有問題，畢竟磚還是要搬的！

話說回來，前端其實還是需求對 SVG 和 Canvas 停止學(xué)習(xí)的，由于其實你不斷都在用，多理解不會讓你有什么損失，最根本的能夠防止：

不至于當(dāng) UI 扔給你一個不契合設(shè)計稿顏色的 SVG 時摸不著頭腦
不至于無法經(jīng)過 CSS 為 SVG 圖自定義其色值時無從下手
以至不曉得為什么要在項目中將展現(xiàn) SVG 的內(nèi)容封裝成組件
...
再往上些就能夠基于 SVG 停止自定義編碼，例如完成各種基于 SVG 的動畫需求、在可視化大屏項目中的應(yīng)用等等。

相關(guān)文章其實早就想寫（在草稿箱里挺長時間了），但由于各種緣由沒有真正輸出，本篇文章以 SVG 為主要內(nèi)容正式開啟探究之旅。

文中如有不正確之處，可在評論區(qū)斧正！??！

SVG 簡介
人話就是說 SVG 是一種可縮放矢量圖形，它能夠用 類 HTML（即 XML） 來表示，也就是 可編碼，因而你能夠在 DOM 中直接運用，能夠經(jīng)過 CSS 控制款式，能夠經(jīng)過 JavaScript 動態(tài)修正。

具有什么優(yōu)勢？
其實經(jīng)過上述的簡介，你就不難看出 SVG 至少有以下兩個優(yōu)點（說多了記不住沒意義）:

可縮放矢量圖形
可編碼性
可縮放矢量圖形
點陣圖/位圖
也就是 由很多的像素組成的圖形，平?？吹降拇蠖鄨D片數(shù)屬于點陣圖，但由于像素十分高，每個點十分小，人的眼睛看不清那一個個的點，所以沒有感知，但其實都是用點組成的，通常將它們不斷放大，就看到區(qū)別了，如下：

原始尺寸圖片

經(jīng)過畫圖軟件放大

從以上來看 點陣圖/位圖 缺陷之一就是 不合適停止無限放大，由于會招致本來人眼不可見的像素被放大，招致視覺上看起來圖片 含糊/失真。

但是也正是由于 點陣圖/位圖 由不同的像素塊組成的，因而能夠給不同的像素塊填充不同顏色，使得整個圖形顏色能夠十分豐厚。

矢量圖形
而 矢量圖形 是用 數(shù)學(xué)向量、依據(jù)幾何特性 來繪制圖形，矢量能夠是 一個點 或 一條線，它是經(jīng)過 多個對象的組合生成 的，對其中的每一個對象的記載方式

并且每個對象都是一個 相互獨立的實體，意味著屢次挪動和改動它的屬性時不會影響圖例中的其它對象，仍能夠在維持它原有明晰度和彎曲度

因而，矢量圖形的優(yōu)點如下：

文件占用內(nèi)在空間較小

矢量圖實踐上保管的是 點、線、矩形 等元素的信息，我們可以看到圖像是由于在我們翻開矢量圖時，由計算機依據(jù)這些信息計算出來的，而 點陣圖/位圖 則是保管各個點的圖像信息
放大后不失真（不會變含糊）

由于它和分辨率無關(guān)，無論我們挪動或改動它的屬性幾次，它都能夠在維持它原有明晰度和彎曲度
可編碼性
可編碼性應(yīng)該不難了解，完整能夠經(jīng)過下面這個圖來解釋（一圖勝千言）：

SVG 的可編碼性使得它相關(guān)于 點陣圖/位圖 具備更強的靈敏性，只需依照其對應(yīng)的規(guī)則去修正 點、線 等相關(guān)信息，我們就能夠改動圖形，而不像 點陣圖/位圖 意義比方只是想要不同顏色的同一張圖片用于切換時，還得單獨準(zhǔn)備兩張圖片等等。

SVG 的運用場景
icon
依據(jù) name 作為標(biāo)識完成援用，這里就不再展開。

平面圖繪制
在項目中需求停止平面圖繪制，如需求繪制 線、多邊形、圖片 等等，比方需求完成前端引導(dǎo)頁功用，其中的遮罩層及高亮矩形局部就是基于 SVG 完成的

動畫繪制
通常會存在需求與用戶產(chǎn)生共鳴或互動的場景，特別是需求滿足創(chuàng)意性排版的需求等，最常見比方公司年度回憶、一些重要內(nèi)容的營銷宣傳等，也可基于 SVG 的方式來完成。

當(dāng)然你也能夠基于

SVG 根本外形元素
SVG 圖像是運用各種元素創(chuàng)立的，這些元素分別應(yīng)用于矢量圖像的構(gòu)造、繪制與規(guī)劃，因而和 SVG 元素相關(guān)的內(nèi)容是需求去理解的，但內(nèi)容不算少， 按 A-Z 的次第大約包括以 A、C、D、E、F、G、H、I、L、M、P、R、S、T、U、V 等作為前綴的元素

圓形元素
是用來創(chuàng)立圓，它是基于一個圓心和一個半徑，對應(yīng)屬性為：

cx 表示圓心的 X 坐標(biāo)
cy 表示圓心的 Y 坐標(biāo)
r 表示半徑<circle cx="50" cy="50" r="50"></circle>
那么假如想要其他 html 元素一樣添加 邊框色 和 背風(fēng)光，該怎樣辦呢？

SVG 元素可不是運用 border-color 和 background-color 屬性完成的，而是經(jīng)過 stroke 和 fill 來完成的

矩形元素
元素用來創(chuàng)立矩形，基于一個角位置以及它的寬和高，還能夠用來創(chuàng)立圓角矩形，其對應(yīng)屬性有：

x 表示 x 軸坐標(biāo)
y 表示 y 軸坐標(biāo)
rx 用于定義程度軸向的圓角半徑尺寸
ry 用于定義縱軸向的圓角半徑尺寸
矩形 變 圓形：正方形時將 rx 或 ry 設(shè)置為寬高的一半即可，長方形時可變橢圓<rect x="25" y="25" width="100" height="100" rx="50" fill="pink" stroke="green"></rect>

橢圓元素
元素用來創(chuàng)立一個橢圓，基于一個 中心坐標(biāo)、x 半徑、y 半徑：

cx 定義一個中心點的 x 軸坐標(biāo)
cy 定義一個中心點的 y 軸坐標(biāo)
rx 用于定義程度軸向的圓角半徑尺寸
ry 用于定義縱軸向的圓角半徑尺寸<ellipse cx="150" cy="75" rx="100" ry="50" fill="pink" stroke="green"></ellipse>

橢圓 變 圓形：只需求將 rx 和 ry 設(shè)置為相同值即可<ellipse cx="150" cy="75" rx="50" ry="50" fill="pink" stroke="green"></ellipse>

線條元素
用來創(chuàng)立一條銜接兩個點的線，其屬性有：

x1 表示第一個點的 x 坐標(biāo)
x2 表示第二個點的 x 坐標(biāo)
y1 表示第一個點的 y 坐標(biāo)
y2 表示第二個點的 y 坐標(biāo)
值得留意的是：需求為 stroke 賦對應(yīng)的色值，否則是無法察看到效果

<line x1="50" y1="20" x2="150" y2="100" stroke="red"></line>

折線元素
是用來創(chuàng)立一系列直線，也就是銜接多個點，它通常創(chuàng)立的是一個開放的外形，即最后一點不與第一點相連，假如需求閉合方式能夠運用 元素。

其專有屬性為：

points 用于表示多個點的坐標(biāo)：x1,y1 x2,y2 x3,y3 ... xn,yn<polyline
points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
fill="white"
stroke="red"
stroke-width="4"
></polyline>
多邊形元素
元素定義了一個由一組首尾相連的直線線段構(gòu)成的閉合多邊形外形，最后一點銜接到第一點，其屬性和 分歧，不同在于表現(xiàn)上。

例好像一個例子在 的表現(xiàn)如下：<polygon

points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
fill="white"
stroke="red"
stroke-width="4"
></polygon>
途徑元素
元素是用來定義外形的通用元素，一切的根本外形都能夠用 path 元從來創(chuàng)立。

其專有屬性包括：

d 用于定義一個要繪制的途徑，途徑定義是一個 途徑命令（下文中會引見） 組成的列表，其中的每一個命令由命令字母和用于表示命令參數(shù)的數(shù)字組成

<path
fill="#f40"
stroke="#000"
d="M 10,30
A 20,20 0,0,1 50,30
A 20,20 0,0,1 90,30
Q 90,60 50,90
Q 10,60 10,30 z"
/>

途徑命令是對要繪制的途徑的闡明，每一個命令由代表命令的字母和代表參數(shù)的 數(shù)字 組成，SVG 定義了六種途徑命令類型，一共 20 條命令。

挪動到：M、m
畫線至：L、l、H、h、V、v
三次方貝塞爾曲線：C、c、S、s
二次方貝塞爾曲線：Q、q、T、t
橢圓曲線：A、a
封鎖途徑：Z、z
不難發(fā)現(xiàn)命令是辨別大小寫的（即大小寫敏感），大寫 的命令指定 絕對坐標(biāo)，小寫 命令指定 相對坐標(biāo)（相對當(dāng)前位置的）。

命令中的數(shù)字能夠運用 負(fù)數(shù) 方式，只不過代表的意義不同：

對 角度 而言 負(fù)數(shù) 表示是 逆時針
在 絕對坐標(biāo) 中，-x 和 -y 均表示為負(fù)坐標(biāo)
在 相對坐標(biāo) 中，-x 值為 向左 挪動，負(fù)的 -y 值為 向上 挪動
望文生義，就是指從 當(dāng)前點 挪動到 下一點，即從 當(dāng)前位置（Po {xo, yo}） 挪動到 新位置（Pn {xn, yn}），并且 Pn 與 Po 之間不會繪制銜接線：

M 絕對坐標(biāo)，將當(dāng)前位置挪動到坐標(biāo) x,y
m 相對坐標(biāo)，將當(dāng)前位置沿 x 軸挪動 dx，沿 y 軸挪動 dy，即
Pn = { xo + dx, yo + dy }<path
fill="none"
stroke="#f40"
stroke-width="10"
d="M 10,10 h 30
m 0,10 h 30
m 0,10 h 30
M 40,20 h 30
m 0,10 h 30
m 0,10 h 30
m 0,10 h 30
m -30,10 h 30
m -60,10 h 30
m -60,10 h 30
m -60,10 h 30
m -60,10 h 30"
/>
Lineto 指令將繪制一條直線段，從 當(dāng)前位置 （Po { xo, yo }） 移到 指定位置（Pn { xn, yn }），指定位置（Pn） 將變成下一個命令中的 當(dāng)前位置（Po）**：

L 在 當(dāng)前位置 和 指定位置 x,y 之間繪制 一條線段

即 Po = Pn = { x, y }
I 在 當(dāng)前位置 和 指定位置 x,y 之間繪制 一條線段，指定位置 為 當(dāng)前位置 沿 x 軸偏移 dx、沿 y 軸偏移 dy 處

即 Po = Pn = { xo + dx, yo + dy }
H 在 當(dāng)前位置 與 指定位置 之間繪制一條 程度線段，指定位置 由 x 參數(shù) 和 當(dāng)前位置的 y 坐標(biāo)指定

即 Po = Pn = { x, yo }
h 在 當(dāng)前位置 與 指定位置 之間繪制一條 程度線段，指定位置 由 當(dāng)前位置 沿 x 軸偏移 dx 的 x 坐標(biāo) 和 當(dāng)前位置 的 y 坐標(biāo)指定

即 Po = Pn = { xo + dx, yo }
V 在 當(dāng)前位置 與 指定位置 之間繪制一條 垂直線段，指定位置 由 y 參數(shù)和 當(dāng)前位置 的 x 坐標(biāo)指定

即 Po = Pn = { xo, y }
v 在 當(dāng)前位置 與 指定位置 之間繪制一條 垂直線段，指定位置 由 當(dāng)前位置 沿 y 軸偏移 dy 的 y 坐標(biāo) 和 當(dāng)前位置 的 x 坐標(biāo)指定

即 Po = Pn = { x, yo + dy }<path
fill="none"
stroke="#f40"
stroke-width="10"
d="M 10,10
L 100,100
V 10
H 30"
/>
三次是運用 四個點 定義的平滑曲線，繪制完成后 終點（Pn） 將成為下一個命令中的 當(dāng)前位置（Po）：

起始點（當(dāng)前位置） — 第一個點

(Po = {xo, yo})

終點 — 第二個點

(Pn = {xn, yn})

起始控制點 — 第三個點

(*Pcs* = {xcs, ycs})（控制在起點左近的曲線的曲率）

終點控制點 — 第四個點

(Pce = {xce, yce})（控制在終點左近的曲線的曲率）

其對應(yīng)的命令如下：

C

在 當(dāng)前位置 和 終點 x,y 之間繪制一條三次貝塞爾曲線，起始控制點 經(jīng)過 x1,y1 指定，終點控制點 經(jīng)過 x2,y2 指定
參數(shù)方式為 (x1,y1, x2,y2, x,y)，各點表示 **`Po = Pn = {x, y}；
Pcs = {x1, y1}；Pce = {x2, y2}`**

c

在 當(dāng)前位置 和 終點（當(dāng)前位置沿 x 軸偏移 dx、沿 y 軸偏移 dy 處）之間繪制一條三次貝塞爾曲線，起始控制點 為當(dāng)前位置沿 x 軸偏移 dx1、沿 y 軸偏移 dy1 處；終點控制點 為當(dāng)前位置沿 x 軸偏移 dx2、沿 y 軸偏移 dy2 處
參數(shù)方式為 (dx1,dy1, dx2,dy2, dx,dy)，各點表示 Po = Pn = {xo + dx, yo + dy} ；Pcs = {xo + dx1, yo + dy1} ；Pce = {xo + dx2, yo + dy2}
S

在 當(dāng)前位置 和 終點 x,y 之間繪制一條平滑的三次貝塞爾曲線，終點控制點 經(jīng)過 x2,y2 指定，起始控制點 是上一條曲線命令的終點控制點在當(dāng)前位置上的 反射點；若上一條命令不是曲線命令，則其與曲線的 起始點（當(dāng)前位置） 相同
參數(shù)方式為 (x2,y2, x,y)
s

在 當(dāng)前位置 和 終點（當(dāng)前位置沿 x 軸偏移 dx、沿 y 軸偏移 dy 處）之間繪制一條平滑的三次貝塞爾曲線，終點控制點 為當(dāng)前位置沿 x 軸偏移 dx2、沿 y 軸偏移 dy2 處；起始控制點 是上一條曲線命令的終點控制點在當(dāng)前位置上的 反射點；若上一條命令不是曲線命令，則其與曲線的 起始點（當(dāng)前位置） 相同
參數(shù)方式為 (dx2,dy2, dx,dy)<path
fill="none"
stroke="red"
d="M 10,90
C 30,90 25,10 50,10
S 70,90 90,90"
/>
<path
fill="none"
stroke="red"
d="M 110,90
c 20,0 15,-80 40,-80
s 20,80 40,80"
/>
二次是運用 三個點 定義的平滑曲線，繪制完成后 終點（Pn） 將成為下一個命令中的 當(dāng)前位置（Po） ：

起始點（當(dāng)前位置）
Po = {xo, yo} — 第一個點
終點
Pn = {xn, yn} — 第二個點
控制點 — 第三個點

Pc = {xc, yc}（控制曲率）

其對應(yīng)命令如下：

Q

在 當(dāng)前位置 和 終點 x,y 之間繪制一條二次貝塞爾曲線，控制點 經(jīng)過 x1,y1 指定
參數(shù)方式為 (x1,y1, x,y)，各點表示 Po = Pn = {x, y} ；Pc = {x1, y1}
q

在 當(dāng)前位置 和 終點（當(dāng)前位置沿 x 軸偏移 dx、沿 y 軸偏移 dy 處）之間繪制一條二次貝塞爾曲線，控制點 為 當(dāng)前位置（曲線的起始點）沿 x 軸偏移 dx1、沿 y 軸偏移 dy1 處
參數(shù)方式為 (dx1,dy1, dx,dy)，各點表示 Po = Pn = {xo + dx, yo + dy} ；Pc = {xo + dx1, yo + dy1}
T

在 當(dāng)前位置 和 終點 x,y 之間繪制一條平滑的二次貝塞爾曲線，控制點 是上一條曲線命令的控制點在當(dāng)前位置上的 反射點；若上一條命令不是曲線命令，則其與曲線的 起始點（當(dāng)前位置） 相同
參數(shù)方式為 (x, y)，各點表示 Po = Pn = {x, y}
t

在 當(dāng)前位置 和 終點（當(dāng)前位置沿 x 軸偏移 dx、沿 y 軸偏移 dy 處）之間繪制一條平滑的二次貝塞爾曲線，控制點 是上一條曲線命令的控制點在當(dāng)前位置上的 反射點；若上一條命令不是曲線命令，則其與曲線的 起始點（當(dāng)前位置） 相同
參數(shù)方式為 (dx, dy)，各點表示 Po = Pn = {xo + dx, yo + dy}<path
fill="none"
stroke="red"
d="M 10,50
Q 25,25 40,50
t 30,0 30,0 30,0 30,0 30,0"
/>
橢圓曲線 實踐上就是用來定義為橢圓的一局部的曲線，當(dāng)需求繪制 高度規(guī)則的曲線 時運用 橢圓曲線 相比于 貝塞爾曲線 會更容易：

A

在 當(dāng)前位置 和 坐標(biāo) x,y 之間繪制一條橢圓曲線，用于繪制圓弧的橢圓中心依據(jù)命令的其他參數(shù)肯定，參數(shù)方式 (rx ry angle large-arc-flag sweep-flag x y)
坐標(biāo) x,y 將成為下一個命令中的當(dāng)前位置
a

在 當(dāng)前位置 和 指定位置 之間繪制一條橢圓曲線，指定位置 為當(dāng)前位置沿 x 軸偏移 dx、沿 y 軸偏移 dy 處，用于繪制圓弧的橢圓中心依據(jù)命令的其他參數(shù)肯定，參數(shù)方式 (rx ry angle large-arc-flag sweep-flag dx dy)
坐標(biāo) dx,dy 將成為下一個命令中的當(dāng)前位置
A 和 a 共同參數(shù)表示如下：

rx 和 ry 是橢圓的兩個半徑
angle 表示橢圓相關(guān)于 x 軸的旋轉(zhuǎn)角度
large-arc-flag 和 sweep-flag 允許選擇必需繪制的弧線，由于其他參數(shù)能夠繪制 4 條可能的弧線

large-arc-flag 允許選擇 一個 大弧線（1）或 一個 小弧線（0）
sweep-flag 允許選擇一條 順時針 旋轉(zhuǎn)的 弧線（1）或一條 逆時針 旋轉(zhuǎn)的 弧線（0）
<svg stroke-width="4">
<path
fill="none"
stroke="red"
d="M 150,50
A 150 50 10 1 0 14,10"
/>
<path
fill="none"
stroke="lime"
d="M 150,50
A 150 50 10 1 1 14,10"
/>
<path
fill="none"
stroke="purple"
d="M 150,50
A 150 50 10 0 1 14,10"
/>
<path
fill="none"
stroke="pink"
d="M 150,50
A 150 50 10 0 0 14,10"
/>

ClosePath 命令將從 當(dāng)前位置 繪制一條 直線 到 途徑中的 第一個點，其對應(yīng)的命令為 Z 或 z，沒有什么參數(shù)，并且大小寫不敏感。<path

fill="pink"
stroke="red"
d="M 150,50
l -10,50 80,0
z"
/>


根底案例理論
由于文章篇幅有限，第一個案例會說得細(xì)一些，后續(xù)的案例就不再逐個細(xì)致剖析了。

環(huán)形進(jìn)度條
這個應(yīng)該是比擬常見的一個需求了，但是假如不讓運用組件庫你打算怎樣完成？

要是沒有理解 SVG 之前，恐怕連這么個看似簡單的效果都不好完成，但是如今我們能夠借助 SVG 來完成，或者我們先來看看組件庫是怎樣完成的：

以上是 ElementUi 中的完成，沒錯就是 SVG ，如今你曉得其實你項目里不斷都有在用 SVG 了吧！

簡單剖析
整體能夠看成是 兩個圓形 堆疊，因而能夠經(jīng)過 元素完成（也能夠選擇 元素，如上述給出的例圖）
元素默許是會繪制整個圓，但是進(jìn)度條肯定不是一開端就是 100% 的，因而能夠運用 stroke-dashoffset 屬性 來將完好的圓變成局部的，但是直接運用 stroke-dashoffset 屬性是不會生效的，由于它要配合 stroke-dasharray 屬性 一同來運用

指定 dash 形式 到 途徑開端 的間隔控制用來描邊的 點劃線 的圖案范式，其實你完整能夠分離 border: 1px solid dash 來了解，就是用于將一段連續(xù)的內(nèi)容變成非連續(xù)的，設(shè)置了它就開啟了 dash 形式
靜態(tài)完成<circle cx="150" cy="75" r="50" stroke="#ebeef5" fill="none"></circle>

<circle
class="process-circle"
cx="150"
cy="75"
r="50"
stroke="#20a0ff"
transform="rotate(-90 150 75)"
fill="none"
stroke-dasharray="314"
stroke-dashoffset="314"
></circle>
添加動畫
經(jīng)過以上的方式就完成了一個靜態(tài)的環(huán)形進(jìn)度條了，接下來就需求它動起來，由于 stroke-dasharray（在這它的值其實就是圓的周長） 和 stroke-dashoffset 的屬性值是需求動態(tài)生成的，因而我們得添加一些 JavaScript 代碼：

function setProcessCircle(percent = 0) {
const processCircle = document.querySelector('.process-circle')
// 獲取圓的周長
const circumference = processCircle.getTotalLength()
// 把周長賦值給 strokeDasharray
processCircle.style.strokeDasharray = circumference
// 動態(tài)計算 offset 賦值給 strokeDashoffset
// 為了支持 percent = 0 | '0%'，所以運用 parseInt 轉(zhuǎn)換
processCircle.style.strokeDashoffset =
circumference * (1 - parseInt(percent) / 100)
}
效果圖中的 html + css 局部就不貼出來了，容易占篇幅。

loading 動畫
例如 ElementUI 中 區(qū)域加載 的 loading 方式如下：

簡單剖析
察看整體不難發(fā)現(xiàn)只需求一個圓形，即便用 元素即可
其藍(lán)色局部不斷在 縮短 或 增長，這點能夠經(jīng)過 stroke-dasharray 和 stroke-dashoffset 屬性來完成，同時添加 transition 過渡動畫即可
最后是每個 縮短 或 增長 的位置不是相同的，那么能夠直接用過動畫 animation 和 roate 來完成停的旋轉(zhuǎn)即可
按鈕動效
簡單剖析
外層包裹的矩形能夠經(jīng)過 元素完成
矩形的線條殘缺不完好，能夠經(jīng)過 stroke-dasharray 和 stroke-dashoffset 屬性來完成
當(dāng)鼠標(biāo)放置上去時，產(chǎn)生的動畫可經(jīng)過 animation、stroke-dasharray 、stroke-dashoffset 等屬性分離即可
復(fù)雜案例實戰(zhàn)
以上的根底案例由于觸及的計算不多，因而我們能夠人工停止計算寬、高、偏移等等數(shù)據(jù)，但是針對復(fù)雜的內(nèi)容，很多參數(shù)就不是那么容易計算出來了，因而，我們需求一些工具來快速得到一些必要參數(shù)，然后我們在基于這些必要參數(shù)取做修正，讓其產(chǎn)生更豐厚的效果即可。

還是同樣的第一個案例這里盡量講細(xì)致點，后續(xù)案例就不再述說過于細(xì)致的內(nèi)容了。

運用 figma 創(chuàng)立文字途徑如下
由于文字內(nèi)容的途徑很難直接計算處置，因而我們能夠經(jīng)過 figma 來協(xié)助我們生成相應(yīng)的文字途徑，大致操作如下：

處置 SVG 代碼內(nèi)容
得到的 SVG 內(nèi)容大致如下，代碼內(nèi)容比擬多這里用圖片替代，其中各個內(nèi)容的對應(yīng)關(guān)系如下

其中的 需求去掉，否則文字的顏色值將無法填充。

stroke-dasharray & stroke-dashoffset 屬性
由于我們需求讓文字具備斷續(xù)銜接的才能，這里還是得運用前面提到 stroke-dasharray 和 stroke-dashoffset 屬性來完成，它們的功用前面曾經(jīng)描繪過了，也用了幾次了，假如你不記得了能夠回過頭去看看。

但是這里的 stroke-dasharray 和 stroke-dashoffset 的值到底該設(shè)置成幾呢？

首先一定是設(shè)置成每個文字的長度，那么問題就變成了怎樣獲取文字的長度了，不用擔(dān)憂

animation 動畫
反復(fù)的事交給 JavaScript
簡單剖析
完成以上效果需求包括以下幾個內(nèi)容：

獲取 目的物 的 SVG 代碼
繪制 運動途徑
讓目的物 沿著途徑運動

獲取目的物的 SVG 代碼
繪制運動途徑
運動途徑的繪制我們依然能夠經(jīng)過 SVG 工具 figma 來獲取，值得留意的是默許的途徑是用還是填充的，真正在應(yīng)用時能夠經(jīng)過 stroke="transparent" 將途徑顏色變成透明色，整體感官更好，大致如下：

讓目的物沿著途徑運動
中心就是引入