SVG的繪制及實現(xiàn)網(wǎng)頁動畫效果

時間：2023-07-05 14:48:01 | 來源：網(wǎng)站運(yùn)營

時間：2023-07-05 14:48:01 來源：網(wǎng)站運(yùn)營

SVG的繪制及實現(xiàn)網(wǎng)頁動畫效果：

一、svg是什么

SVG是一種XML語言，類似XHTML，可以用來繪制矢量圖形。SVG可以通過定義必要的線和形狀來創(chuàng)建一個圖形，也可以修改已有的位圖，或者將這兩種方式結(jié)合起來創(chuàng)建圖形。

二、svg基礎(chǔ)圖像的繪制

<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg"> // 矩形繪制 <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/> <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>// 圓形和橢圓 <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/> <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>// 直線和曲線 <line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/> <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145" stroke="orange" fill="transparent" stroke-width="5"/>// 多邊形 <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180" stroke="green" fill="transparent" stroke-width="5"/>// 路徑 <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/></svg>1.矩形

<rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>x：矩形左上角的x位置

y：矩形左上角的y位置

width：矩形的寬度

height：矩形的高度

rx：圓角的x方位的半徑

ry：圓角的y方位的半徑




2.圓形

<circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>r：圓的半徑

cx：圓心的x位置

cy：圓心的y位置




3.橢圓

<ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>rx：橢圓的x半徑

ry：橢圓的y半徑

cx：橢圓中心的x位置

cy：橢圓中心的y位置




4.線條

<line x1="10" x2="50" y1="110" y2="150"/>x1：起點的x位置

y1：起點的y位置

x2：終點的x位置

y2：終點的y位置




5.折線

<polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>points：點集數(shù)列。每個數(shù)字用空白、逗號、終止命令符或者換行符分隔開。每個點必須包含2個數(shù)字，一個是x坐標(biāo)，一個是y坐標(biāo)。所以點列表 (0,0), (1,1) 和(2,2)可以寫成這樣：“0 0, 1 1, 2 2”。

6.路徑：做復(fù)雜圖形的重點

path可能是SVG中最常見的形狀。你可以用path元素繪制矩形（直角矩形或者圓角矩形）、圓形、橢圓、折線形、多邊形，以及一些其他的形狀，例如貝塞爾曲線、2次曲線等曲線。

6.1 path命令

<path>元素d屬性命令：M = moveto(M X,Y) ：將畫筆移動到指定的坐標(biāo)位置L = lineto(L X,Y) ：畫直線到指定的坐標(biāo)位置H = horizontal lineto(H X)：畫水平線到指定的X坐標(biāo)位置V = vertical lineto(V Y)：畫垂直線到指定的Y坐標(biāo)位置C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)：三次貝賽曲線S = smooth curveto(S X2,Y2,ENDX,ENDY)：平滑曲率Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY)：二次貝賽曲線T = smooth quadratic Belzier curveto(T ENDX,ENDY)：映射A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧線Z = closepath()：關(guān)閉路徑6.2 基礎(chǔ)屬性

stroke：設(shè)置繪制對象的線條的顏色。

fill: 設(shè)置對象內(nèi)部的顏色。

fill-opacity：控制填充色的不透明度。

stroke-opacity：描邊的不透明度。

stroke-width：定義了描邊的寬度。

stroke-linecap：它控制邊框終點的形狀，

stroke-linecap屬性的值有三種可能值：

• butt用直邊結(jié)束線段，它是常規(guī)做法，線段邊界90度垂直于描邊的方向、貫穿它的終點。
• square的效果差不多，但是會稍微超出實際路徑的范圍，超出的大小由stroke-width控制。
• round表示邊框的終點是圓角，圓角的半徑也是由stroke-width控制的。

stroke-linejoin：控制兩條描邊線段之間，用什么方式連接。

stroke-dasharray：將虛線類型應(yīng)用在描邊上。

stroke-dasharray屬性的參數(shù)，是一組用逗號分割的數(shù)字組成的數(shù)列。注意，和path不一樣，這里的數(shù)字必須用逗號分割（空格會被忽略）。每一組數(shù)字，第一個用來表示填色區(qū)域的長度，第二個用來表示非填色區(qū)域的長度。

6.3線性漸變

線性漸變沿著直線改變顏色，要插入一個線性漸變，你需要在SVG文件的defs元素內(nèi)部，創(chuàng)建一個<linearGradient>節(jié)點。<linearGradient>元素還需要一些其他的屬性值，它們指定了漸變的大小和出現(xiàn)范圍。漸變的方向可以通過兩個點來控制，它們分別是屬性x1、x2、y1和y2，這些屬性定義了漸變路線走向。漸變色默認(rèn)是水平方向的，但是通過修改這些屬性，就可以旋轉(zhuǎn)該方向。下例中的Gradient2創(chuàng)建了一個垂直漸變。

<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="Gradient1"> <stop class="stop1" offset="0%"/> <stop class="stop2" offset="50%"/> <stop class="stop3" offset="100%"/> </linearGradient> <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> <stop offset="0%" stop-color="red"/> <stop offset="50%" stop-color="black" stop-opacity="0"/> <stop offset="100%" stop-color="blue"/> </linearGradient> <style type="text/css"><![CDATA[ #rect1 { fill: url(#Gradient1); } .stop1 { stop-color: red; } .stop2 { stop-color: black; stop-opacity: 0; } .stop3 { stop-color: blue; } ]]></style> </defs> <rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100"/> <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/> </svg>

三、基礎(chǔ)變形

<g>元素：可以把屬性賦給一整個元素集合。

平移：translate()變形方法

<rect x="0" y="0" width="10" height="10" transform="translate(30,40)" />旋轉(zhuǎn)：transform: rotate( )方法

傾斜：transform: skewx( )方法

透視：perspective（）方法

matrix：指定了一個由指定的 6 個值組成的 2D 變換矩陣。這種矩陣的常量值是隱含的，而不是由參數(shù)傳遞的；其他的參數(shù)是以列優(yōu)先的順序描述的。

語法

matrix(a, b, c, d, tx, ty)matrix(a, b, c, d, tx, ty) 是 matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1) 的簡寫。

四、配合CSS3的animation實現(xiàn)svg動畫

<svg width="800" height="800" version="1.1" xmlns="http://www.w3.org/2000/svg"> <line x1="10" x2="600" y1="110" y2="110" stroke="orange" fill="transparent" stroke-width="8" /> </svg>先畫一條線

實現(xiàn)的方法有兩種

（1）利用stroke-dasharray和stroke-dashoffset這兩個屬性，對于stroke-dasharray可以參考下圖來理解：

而stroke-dashoffset則可以理解成類似translate的偏移值。通過CSS來設(shè)置這兩個值，之前的路徑就會變成這個樣子：

.line{ stroke-dasharray: 20px, 10px; stroke-dashoffset: 0;}得到如下效果

配合css animation 讓線的虛線實部分由0到全部，空的部分由全部到0就實現(xiàn)了以下效果

.line{ animation: move 3s linear forwards;}@keyframes move { 0%{ stroke-dasharray: 0, 800px; } 100%{ stroke-dasharray: 800px, 0; }}800px這個值是整條直線的長度，如果是復(fù)雜路徑可以用DOM的API來獲取到路徑長度值：

document.getElementById('path').getTotalLength()（2）直接讓線進(jìn)行平移動畫，就是基礎(chǔ)的css動畫效果

.line{ animation: move 3s linear forwards;}@keyframes move { 0%{ transform: translateX(-100%); } 100%{ transform: translateX(0); }}實現(xiàn)如上圖一樣的效果

如果線條比較復(fù)雜就必須用到path路徑，比如作者最近做的一個動畫效果：

復(fù)雜動畫最重要的是path的路徑，得到路徑就可以用線條去實現(xiàn)：

<svg width="180" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path id="pathSecond" fill="none" stroke="rgba(0,0,0,0.8)" stroke-width="2px" d="M73.73,24.5c0,0,2.78-21.26-23.75-16.46 c0,0-11.12-12.63-25.01-5.81c0,0-11.12,4.8-8.84,16.67 c0,0-13.81-2.27-16.13,13.39c0,0-3.07,10.67,10.32,16.71h180.02" /> </svg>path中的d路徑可以打開AI，用鋼筆工具描線條，然后保存為svg格式，用記事本打開文件就能獲取path了，然后配合animation

#pathSecond { stroke-dashoffset: 0; animation: move 3s infinite linear;}@keyframes move { 0%{ stroke-dasharray: 0, 600px; opacity: 1; stroke-width: 3px } 100%{ stroke-dasharray: 600px, 0px; opacity: 0; }}就可以得到這個效果了

還可以試試其他的基礎(chǔ)變形，去做svg動畫。




參考文章：MDN和本站文章