整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
SVG中，使用 path 標簽來定義一個路徑。它是一個單標簽，基本語法為：尖角號 path，斜線尖角號。應用路徑，我們可以繪制任意形狀的圖形。
path標簽的重要屬性 d，用來定義繪制路徑的命令，d 是 draw 的縮寫，就是繪制的意思。
繪制路徑的命令有很多，先看兩個常用的命令：
M 命令，是 moveto 的縮寫，定義繪制圖形的起點坐標。例如 M 150 0 (大M，空格，150，空格，0)，也可以寫成 M150 0 (大M, 150，空格，0) ，表示路徑從屏幕坐標的 x 150，y 0 (直接讀) 這個點開始繪制。
L 命令，是 lineto 的縮寫，用來繪制一條直線。例如 l 75 200 (讀小l，空格，75，空格，200) ，也可以寫成 l75 200 (讀作小l，75，空格，200)，表示從上一個結束點到 x 75，y 200 (直接讀) 這個點繪制一條直線。
注意：命令的字母大小寫，表示的意義是不同的。大寫字母表示絕對定位，小寫字母表示相對定位。絕對定位是相對于屏幕坐標原點的位置，相對定位是相對于上一個繪制點的位置。
打開編輯器，新建一個 path.html 文件，補全基礎代碼，在 body 里添加一個 svg 標簽，定義屬性 width 等于 400，height 等于 210。
在 svg 里添加 path 標簽，定義屬性 d，它的值定義為 "M150 0 L75 200 L225 200"。保存文件。
在瀏覽器中預覽，一個具有默認黑色的三角形就繪制好了。
這里你可能會問：用 polygon 繪制多邊形不也可以嗎，為什么用 path 呢？其實，path 的繪制能力非常強，比如繪制一條貝塞爾曲線。
“貝賽爾曲線”是由法國數學家皮埃爾·貝塞爾（Pierre Bézier）發明的，由此為計算機矢量圖形學奠定了基礎。
在 path 中，繪制“貝賽爾曲線” 使用 Q 命令。
Q 是 quadratic Bézier curve ([k??rv]) 的縮寫，用來繪制二次貝塞爾曲線，需要定義控制點和終點的坐標。例如 q 150 -300 300 0，表示控制點坐標是 x 150，y -300，終點坐標是 x 300，y 0。這個比較難理解，大家來看一下二次貝塞爾曲線繪制示意圖。
回到編輯器，為了強化練習，我們來繪制一張二次貝塞爾曲線模擬靜態圖。(此時會展示繪制完以后的效果圖)
A為起點，B為控制點，C為終點。在AB，BC 兩條紅色的線段上，有一條綠色的切線，藍色的為繪制的貝塞爾曲線。
我們先來繪制三個點。在上個 svg 結尾處添加一個 br 標簽。回車換行。
添加一個新的 svg 標簽，屬性 width 等于 450，height 等于 400。
我首先繪制三個點。在 svg 標簽里添加一個 circle 標簽，定義屬性 cx 等于 100，cy 等于 350，r 等于 3。
復制兩個 circle，分別改寫一下圓心的位置坐標。
這里我們能成組的給三個小圓定義顏色等屬性嗎？可以的。
在SVG中，我們可以使用 g 標簽把多個繪圖元素包裹起來，在 g 標簽上定義公共的屬性。
我們給三個小圓定義一個父標簽 g，定義屬性 fill，值為 black。保存。
回到瀏覽器，刷新，三個小圓點做好了。
接下來繪制三個點的名稱。
回到編輯器，再創建一個 g 標簽，在 g 標簽里添加一個 text 標簽，填入文本大寫字幕 A。給 text 定義屬性 x 等于 100，y 等于 350，dx 等于 -30。
復制兩份 text 標簽，修改文本內容分別為 B，和 C。再修改一下屬性。
最后給 g 定義三個文本的公共屬性，font-size 等于 30，fill 等于 black，text-anchor 等于 middle。保存。
回到瀏覽器，刷新，三個點的名稱定義好了。
接下來繪制AB，BC兩條線段。
回到編輯器，在 svg 里的首行創建一個 path 標簽，定義 d 屬性，值為 "M 100 350 l 150 -300" (直接讀，注意那個小 l ) ，定義 stroke 屬性，值為 red，定義 stroke-width 屬性，值為 3，fill 屬性，值為 none。
復制一個 path，修改一下 d 屬性的值。保存。
回到瀏覽器，刷新，兩條紅色的線段繪制好了。
接下來繪制綠色的切線。
回到編輯器，創建第三個 path 標簽，定義 d 屬性，值為 "M 175 200 l 150 0" (直接讀，注意那個小 l ) ，定義 stroke 屬性，值為 green，定義 stroke-width 屬性，值為 3，fill 屬性，值為 none。保存。
回到瀏覽器，刷新，一條綠色的切線繪制好了。
最后繪制主角兒，貝塞爾曲線。
回到編輯器，創建第四個 path 標簽，定義 d 屬性，值為 "M 100 350 q 150 -300 300 0" (直接讀，注意大M，小 q ) ，定義 stroke 屬性，值為 blue，定義 stroke-width 屬性，值為 5，fill 屬性，值為 none。保存。
回到瀏覽器，刷新，完整的二次貝塞爾曲線模擬圖就繪制好了。
返回編輯器，我們可以把輔助的點和線都去掉，保存。
回到瀏覽器，刷新，只顯示了第四條 path 路徑，貝塞爾曲線！
文章配套視頻鏈接：https://www.bilibili.com/video/BV1oU4y1278g?p=48
我個人的博客網站樹下魅狐的首頁，使用了SVG路徑動畫來繪制LOGO。該動畫采用SVG+CSS的方式完成的。今天在這里快速的分享一下制作過程。
SVG是用于描述二維圖形的一種語言。SVG允許使用三種類型的圖形對象：矢量圖形(例如：由直線和曲線組成的路徑)，圖像和文本。圖形對象可以進行分組，樣式設置，轉換和合成。SVG和XML文件混合使用時，它可以使用XML語法，當SVG和HTML文件混合使用時，它又可以使用HTML的語法。
SVG的全稱是Scalable Vector Graphics，翻譯過來是可伸縮矢量圖形。因此，SVG圖形在放大或縮小的情況下其圖形的質量不會有損失。SVG除了可以制作圖像外，還可以用于制作各種小動畫。在使用SVG之前，先得了解一下各大瀏覽器對其兼容性，下面通過一張圖片來詳細了解：
在開始介紹制作過程之前，通過一個動畫了解一下最終的動畫形態：
第一步，我們可以通過Adobe Illustrator軟件生成一個自己想要的SVG路徑。在本例中，我將字符“RAMOSTEAR”通過Adobe Illustrator生成了路徑并導出到編輯器中，代碼如下：
<svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 938.57 122.65">
<g>
<path id="p1" class="cls-1"
d="M86.87,39.76c0-27.22-19.94-35.65-44.18-35.65H2V118.54H28V77.37h13.6l21.84,41.17h29L66.49,72.78C78.71,67.26,86.87,56.57,86.87,39.76ZM28,24.66H40.58c13.6,0,20.9,3.8,20.9,15.1s-7.3,17.06-20.9,17.06H28Z"/>
<path id="p2" class="cls-1"
d="M132.31,4.11,96.67,118.54h26.51l7-27.22H164.6l6.94,27.22H199L163.36,4.11Zm3,67,2.71-10.55c2.9-11.42,6.08-24.82,8.88-36.9h.7c2.75,12.08,6.24,25.48,9.14,36.9l2.68,10.55Z"/>
<path id="p3" class="cls-1"
d="M257.33,44.66l-3.79,15.83h-.71L249,44.66,237.77,4.11H210.62V118.54h21.55V83.11c0-12.88-2.17-40.78-3.48-53.15h.61l8.19,30.71,9.06,27.57h12.57L268,60.67,276.8,30h.52c-1.21,12.37-3.47,40.27-3.47,53.15v35.43h21.91V4.11H268.59Z"/>
<path id="p4" class="cls-1"
d="M358.53,2c-27.25,0-46,20.56-46,58.8,0,39.14,18.77,59.85,46,59.85s46-20.71,46-59.85C404.56,22.56,385.79,2,358.53,2Zm0,96.28c-11.93,0-19.47-12.8-19.47-37.48,0-23.78,7.54-36.43,19.47-36.43S378,37,378,60.8C378,85.48,370.47,98.28,358.53,98.28Z"/>
<path id="p5" class="cls-1"
d="M483.46,54l-14-5.93c-11-4.12-18.64-6.64-18.64-13.52,0-6.69,5.79-10.22,14.32-10.22,11.18,0,18.31,3.15,26.37,8.94L504.55,17a55.46,55.46,0,0,0-38-15c-24.86,0-41.93,15.15-41.93,34.1,0,16.65,11.57,26.38,24.25,31.2l14.91,6.36c10.83,4.54,17.63,6.53,17.63,14.77,0,5.59-5.08,9.85-16.07,9.85s-21.76-4.86-30.42-12l-14.86,17.79a65.91,65.91,0,0,0,43.57,16.53c28.32,0,44.28-16.48,44.28-35.5C507.9,69,498.44,59.66,483.46,54Z"/>
<polygon id="p6" class="cls-1"
points="521.97 25.82 556.28 25.82 556.28 118.54 582.18 118.54 582.18 25.82 616.48 25.82 616.48 4.11 521.97 4.11 521.97 25.82"/>
<polygon id="p7" class="cls-1"
points="664.01 70.49 706.45 70.49 706.45 48.77 664.01 48.77 664.01 25.82 713.97 25.82 713.97 4.11 638.11 4.11 638.11 118.54 715.72 118.54 715.72 96.82 664.01 96.82 664.01 70.49"/>
<path id="p8" class="cls-1"
d="M764.4,4.11,728.76,118.54h26.5l7-27.22h34.43l7,27.22h27.45L795.44,4.11Zm3,67,2.7-10.55c2.9-11.42,6.08-24.82,8.88-36.9h.7c2.76,12.08,6.24,25.48,9.14,36.9l2.69,10.55Z"/>
<path id="p9" class="cls-1"
d="M935.14,118.54,909.27,72.78c12.22-5.53,20.38-16.21,20.38-33,0-27.22-19.94-35.65-44.19-35.65H844.78V118.54h26V77.37h13.6l21.84,41.17ZM870.73,24.66h12.63c13.6,0,20.9,3.8,20.9,15.1s-7.3,17.06-20.9,17.06H870.73Z"/>
</g>
</svg>
借助工具，可以快速生成我們想要的圖形，你也可以手動書寫，但效率很低（不推薦）
我們將上述的代碼插入到事先準備好的HTML文件中，然后通過JavaScript來獲得每個路徑的總長度。首先，將SVG代碼插入到HTML代碼中，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<title>SVG TEXT ANIMATION</title>
</head>
<body>
<svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 938.57 122.65">
//...
</svg>
<script src="js/app.js"></script>
</body>
</html>
接下來，在app.js中通過querySelectorAll()函數獲取所有的路徑，并通過getTotalLength()函數來獲得每一個路徑的總長度，代碼如下：
const paths=document.querySelectorAll("#logo path");
const polygons=document.querySelectorAll("#logo polygon");
for(let i=0;i<paths.length;i++){
console.log(paths[i].getAttribute("id")+" -> "+paths[i].getTotalLength());
}
for(let i=0;i<polygons.length;i++){
console.log(polygons[i].getAttribute("id")+" -> "+polygons[i].getTotalLength());
}
說明：
在使用Adobe Illustrator導出SVG時，不完全是路徑(path),還參雜著兩個多邊形(polygon),所以還需獲得polygon的路徑長度。
在瀏覽器中打開HTML文件，你可以在控制臺中看到如下的日志信息：
app.js:3 p1 -> 587.9400634765625
app.js:3 p2 -> 537.8978271484375
app.js:3 p3 -> 756.9060668945312
app.js:3 p4 -> 523.8944091796875
app.js:3 p5 -> 525.183349609375
app.js:3 p8 -> 537.9104614257812
app.js:3 p9 -> 587.8800048828125
app.js:8 p6 -> 417.8800048828125
app.js:8 p7 -> 568.8799438476562
這樣，我們就獲得了所有圖形的路徑長度。接下來，就可以在CSS文件中操作這些參數。
前面我們已經獲取了所有圖形的路徑總長度，現在就可以利用CSS3的@keyframes和animation來定義動畫。動畫的定義很簡單，主要是改變路徑的stroke-dasharray和stroke-dashoffset兩個參數。stroke-dasharray用于設置路徑的總長度，stroke-dashoffset用于設置路徑的偏移量。一開始，將各路徑的長度和偏移量都設置為同一個值，然后再利用animation將偏移量變為0，這樣就可以形成一個類似手寫文字的動畫效果。主要的CSS代碼如下：
.cls-1{
stroke: #fff;
stroke-width: 2px;
}
#logo{
width: 80%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
animation: text-fill-anim 0.5s ease forwards 4s;
}
#p1{
stroke-dasharray: 587.9400634765625;
stroke-dashoffset: 587.9400634765625;
animation: text-anim 3s ease forwards;
}
#p2{
stroke-dasharray: 537.8978271484375;
stroke-dashoffset: 537.8978271484375;
animation: text-anim 3s ease forwards 0.2s;
}
#p3{
stroke-dasharray: 756.9060668945312;
stroke-dashoffset: 756.9060668945312;
animation: text-anim 3s ease forwards 0.4s;
}
#p4{
stroke-dasharray: 523.8944091796875;
stroke-dashoffset: 523.8944091796875;
animation: text-anim 3s ease forwards 0.6s;
}
#p5{
stroke-dasharray: 525.183349609375;
stroke-dashoffset: 525.183349609375;
animation: text-anim 3s ease forwards 0.8s;
}
#p6{
stroke-dasharray: 417.8800048828125;
stroke-dashoffset: 417.8800048828125;
animation: text-anim 3s ease forwards 1s;
}
#p7{
stroke-dasharray: 568.8799438476562;
stroke-dashoffset: 568.8799438476562;
animation: text-anim 3s ease forwards 1.2s;
}
#p8{
stroke-dasharray: 537.9104614257812;
stroke-dashoffset: 537.9104614257812;
animation: text-anim 3s ease forwards 1.4s;
}
#p9{
stroke-dasharray: 587.8800048828125;
stroke-dashoffset: 587.8800048828125;
animation: text-anim 3s ease forwards 1.6s;
}
@keyframes text-anim {
to{
stroke-dashoffset: 0;
}
}
@keyframes text-fill-anim {
to{
fill: white;
}
}
這樣，通過簡單的三步，一個SVG+CSS的路徑動畫就制作完成了。
說明：
JS文件中的函數主要是輔助我們計算每個圖形的路徑長度，在動畫制作完成后，可以將其刪除。
你可以通過下面的一段視頻，了解整個動畫的制作過程。
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
自己動手寫SVG路徑動畫(零基礎三步曲視頻教程)
SVG 中我們可以使用 <path> 元素來定義路徑。<path> 的功能很強大，既可以創建基本的圖形，也可以創建更復雜的形狀。<path> 路徑是由一些命令來控制的，每個命令對應一個字母，字母區分大小寫。
<path> 元素可以用于定義路徑，元素中有一個 d 屬性，這個 d 屬性是一系列命令的集合。
<path> 元素中支持下列命令，如果是大寫命令表示絕對定位，小寫則表示相對定位：
命令 | 參數 | 描述 |
M | x y | 移動畫筆到給定坐標，即起始點 |
L | x y | 繪制一條到給定坐標的線，可提供多組坐標繪制折線 |
H | x y | 繪制一條到 x 坐標的橫線 |
V | y | 繪制一條到 y 坐標的豎線 |
C | x yx1 y1 x2 y2 | 繪制一條從當前點到（x,y）的三次貝塞爾曲線，（x1,y1）為曲線的開始控制點，（x2,y2）為曲線的終點控制點 |
S | x y x1 y1 | 繪制一條從當前點到（x,y）的三次貝塞爾曲線，（x1,y1）為新端點的控制點 |
Q | x y x1 y1 | 繪制一條從當前點到（x,y），控制點為（x1,y1）的二次貝塞爾曲線 |
T | x y | 繪制一條從當前點到（x,y）的二次貝塞爾曲線 |
A | rx ry x-axis-rotation large-arc-flag sweep-flag x y | 繪制當前點到（x,y）的橢圓弧，橢圓弧的 x，y軸半徑分別為 rx,ry。橢圓相對于 x 軸旋轉 x-axis-rotation 度。large-arc-flag 等于0表示弧線小于180度，等于1表示弧線大于180度。sweep-flag 等于0 表示弧線逆時針旋轉，等于1表示弧線順時針選裝 |
Z | 閉合路徑 |
示例：
例如我們使用路徑命令繪制一個矩形：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG學習(9xkd.com)</title>
<link rel="styleSheet" type="text/css" href="./style.css">
</head>
<body>
<svg width="500" height="500">
<path d="M50 50 L200 50 L200 150 L50 150 Z" style="fill:#f5bf8d;" />
</svg>
</body>
</html>
在瀏覽器中的演示效果：
其中 M 命令指定了開始點的位置，即左上角 (50,50)，L 命令可以用于繪制一條直線段，這個直線段從當前位置移到指定位置。上述三個 L 位置分別為右上角 (200,50)、右下角 (200,150)、左下角(50,150)。Z 命令為閉合路徑命令。
使用 <path> 中的 A 和 a 命令，可以繪制圓弧，使用 A 命令（絕對坐標）作為其端點，a 命令（相對坐標） 作為起點。
示例：
例如下面這個例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG學習(9xkd.com)</title>
<link rel="styleSheet" type="text/css" href="./style.css">
</head>
<body>
<svg width="500px" height="500px" >
<path d="M50,40 A30,50 0 0,1 100,110" fill="transparent" stroke="green"/>
</svg>
</body>
</html>
在瀏覽器中的演示效果：
從代碼中可以看到，這段弧線的起點為 (50,40)，終點為(100, 110)，圓弧的半徑為 A 命令上的前兩個參數，即 rx 為30，ry 為 50。A 命令上的第三個參數為 x-axis-rotation， 被設置為了0，第四個 large-arc-flag 的值等于 0 ，這表示弧線小于180度。
鏈接：https://www.9xkd.com/
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
