一、Svg簡介
svg也是html5新增的一個標簽，它跟canvas很相似。都可以實現繪圖、動畫。
但是svg繪制出來的都是矢量圖，不像canvas是以像素為單位的，放大會模糊。svg繪制出來的圖是不會的
二、svg的基本使用
svg是在html和css里面操作的，不是在js里面
<body>
<svg width="500" height="500"> <svg>
</body>
2.1 繪制直線
line{
stroke: red;
}
<!-- line（直線）前面兩個值是起始點坐標，后面兩個值是終點坐標 -->
<line x1="100" y1="100" x2="200" y2="200"></line>
2.2 繪制矩形
<!-- rect（矩形）前面兩個值是位置，中間兩個值是圓角，后面兩個值是設置寬高 --> <rect x="50" y="20" rx="10" ry="10" width="150" height="150"></rect>
我們來看看加上css樣式，空心矩形
rect{
fill:transparent; //設置為透明色
stroke: red; //描邊為紅色
}
2.3 繪制圓弧
<!-- cirle（圓弧）前面第一個值是設置圓的半徑，后面值是位置。實心圓--> <!-- 可以在css設置為透明再設置描邊，就會成空心圓 --> <circle r="50" cx="200" cy="100"></circle>
2.4 繪制橢圓
<!-- ellipse(橢圓) 第一個值為圓的寬度，第二個為圓的高度，后兩值為圓的位置--> <!-- 可以在css設置為透明再設置描邊，就會成空心 --> <ellipse rx="60" ry="30" cx="100" cy="100"></ellipse>
2.5 繪制折線
<!-- polugon(折線) 起點會跟終點相連接 --> <!-- 可以在css設置為透明再設置描邊，就會成空心 --> <polygon points="100 100, 200 50, 300 100, 400 50"></polygon> <!-- poluline(折線) 起點會跟終點相連接 --> <!-- 可以在css設置為透明再設置描邊，就會成空心 --> <polyline points="100 200, 200 150, 300 200, 400 150"></polyline>
2.6 繪制文本
<!-- text（文本）跟絕對定位一個道理 --> <text x="400" y=150>123</text>
三、樣式屬性
fill: 填充色 （默認為黑色）
stroke: 線條的顏色（默認為黑色）
stroke-width: 線條的寬度
stroke-linecap: 線條末尾的樣式 (默認)butt (圓角)round (方形)square ，round和square會影響線條的長度
默認的樣式就不設置了，設置跟設置沒上面兩樣
round(圓角)
square（方形）
stroke-linejoin：可使用的值是:miter, round, bevel, inherit 筆划連 接屬性定義了路徑拐角的形狀,"miter"是默認值,"round"光滑連接,"bevel"折線連接,"inherit"繼 承
round
bevel
opacity: 不透明度 0~1（可以設置填充的，也可以描邊的）
用上面所學的知識來做個小demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> svg { margin-left: 100px; margin-top: 100px; border: 1px solid black; } rect{ fill: transparent; stroke: black; stroke-width: 5px; } polygon{ fill: black; } circle{ fill: transparent; stroke: black; stroke-width: 4px; } .yan{ fill: black; } .bi{ fill: transparent; stroke: black; stroke-width: 3px; } ellipse{ fill: transparent; stroke: black; stroke-width: 3px; } text{ stroke: red; } </style> </head> <body> <svg width="500" height="500"> <rect x="100" y="100" rx="15" ry="15" width="300" height="300"></rect> <polygon points="110 100, 130 60, 190 95, 250 60, 310 95,370 60, 390 100"></polygon> <circle r="20" cx="190" cy="200"></circle> <circle r="20" cx="320" cy="200"></circle> <circle class="yan" r="5" cx="198" cy="208"></circle> <circle class="yan" r="5" cx="328" cy="208"></circle> <polygon class="bi" points="240 300, 250 260, 270 300"></polygon> <ellipse rx="30" ry="10" cx="260" cy="330"></ellipse> <text x="200" y="440">屏幕前的你很帥</text> </svg> </body> </html>
四、path元素（指令）
moveTo lineTo
4.1 M命令和L命令
<path d = "M 100 100 L 200 100 "></path>
4.2 m命令和l命令
<path d="m 100 100 l 200 100 "></path>
大寫表示絕對定位，小寫表示相對定位
絕對坐標和相對坐標，相對於上個移動距離
4.3 H和V命令
<!-- H水平方向 V豎着方向 --> <path d="M 100 100 H 200 V 200"></path>
大寫表示絕對定位，小寫表示相對定位
絕對坐標和相對坐標，相對於上個移動距離
4.4 Z命令
<path d="M 100 100 H 200 V 200 Z"></path>
圓弧指令
4.5 A命令 可以傳7個參數 rx, ry, x-axis-rotaion, large-arc-flag, sweep-flag, x, y
rx, ry圓弧的x軸半徑和y軸半徑
x-axis-rotaion 圓弧的相對x軸的旋轉角度，默認是順時針，可以設置負值
large-arc-flag 表示圓弧路徑是大圓弧還是小圓弧，1是大圓弧，0是小圓弧
sweep-flag 表示從起點到終點是順時針還是逆時針，1表示順時針，0表示逆時針
x, y 表示終點坐標，絕對或相對
<path d="M 100 100 A 70 120 90 1 1 100 200"></path>
如果不懂獲取不清楚可以評論找我，或者自己多試試參數研究研究
五、貝塞爾曲線
5.1 二次貝塞爾曲線
Q x1, y1, x, y
T x , y
<path d = "M 100 100 Q 200 50 300 300"></path>
加上T
<path d = "M 100 100 Q 200 50 300 300 T 450 200"></path>
做個小demo（logo）
<path d="M 120 280 Q 80 460 300 310 T 450 200"></path> <path d="M 120 280 Q 115 360 280 284 T 450 200"></path>
5.2 三次貝塞爾曲線
C ： x1, y1, x2, y2, x, y
S： x2, y2, x, y
<path d="M 100 100 C 190 140 230 80 280 120 S 250 160 280 120"></path>
都差不多是一個道理，自己試試就可以懂的
自動生成繪制路徑的網站：https://editor.method.ac/
繪制出自己想要的樣式，然后按 ctrl+U 把代碼拿出來用
六、漸變
6.1 線性漸變
<linearGradient> 可用來定義 SVG 的線性漸變。
<linearGradient> 標簽必須嵌套在 <defs> 的內部。<defs> 標簽是 definitions 的縮寫，它可對諸如漸變之類的特殊元素進行定義。
線性漸變可被定義為水平、垂直或角形的漸變：
-
當 y1 和 y2 相等，而 x1 和 x2 不同時，可創建水平漸變
-
當 x1 和 x2 相等，而 y1 和 y2 不同時，可創建垂直漸變
-
當 x1 和 x2 不同，且 y1 和 y2 不同時，可創建角形漸變
<svg width="500" height="500"> <defs> <linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255,255,0); stop-opacity:1"/> <stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:1"/> </linearGradient> </defs> <ellipse cx="200" cy="190" rx="85" ry="55" style="fill:url(#orange_red)"/> </svg>
6.2徑向漸變
<radialGradient> 用來定義徑向漸變。
<radialGradient> 標簽必須嵌套在 <defs> 中。<defs> 標簽是 definitions 的縮寫，它允許對諸如漸變等特殊元素進行定義。
<svg width="500" height="500"> <defs> <radialGradient id="grey_blue" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(200,200,200);stop-opacity:0"/> <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1"/> </radialGradient> </defs> <ellipse cx="230" cy="200" rx="110" ry="100" style="fill:url(#grey_blue)"/> </svg>
6.3 高斯模糊
<filter> 標簽用來定義 SVG 濾鏡。<filter> 標簽使用必需的 id 屬性來定義向圖形應用哪個濾鏡？
<filter> 標簽必須嵌套在 <defs> 標簽內。<defs> 標簽是 definitions 的縮寫，它允許對諸如濾鏡等特殊元素進行定義。
<svg width="500" height="500"> <defs> <filter id="Gaussian_Blur"> <feGaussianBlur in="SourceGraphic" stdDeviation="3" /> </filter> </defs> <ellipse cx="200" cy="150" rx="70" ry="40"style="fill:#ff0000;stroke:#000000;stroke-width:2;filter:url(#Gaussian_Blur)"/> </svg>
再舉一個例子
七、路徑動畫
stroke-dasharray、stroke-dashoffset
line{ stroke: red; stroke-width: 10px; stroke-linecap: butt; } </style> </head> <body> <svg width="500" height="500"> <line x1="100" y1="100" x2="400" y2="100"></line> </svg> </body>
先畫出一條直線，方便觀察。
再來添加stroke-dasharray：10px
line{ stroke: red; stroke-width: 10px; stroke-linecap: butt; stroke-dasharray: 10px ; } </style> </head> <body> <svg width="500" height="500"> <line x1="100" y1="100" x2="400" y2="100"></line> </svg> </body>
再來添加stroke-dasharray：10px 20px;
再來添加stroke-dasharray：10px 20px 30px;
依此類推添加，就不再多寫了，可以自己試試
接着再來設置添加一下 stroke-dashoffset （偏移量） 屬性
隨着偏移量增加可以無限循環播放
做個小demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> svg { margin-left: 100px; margin-top: 100px; border: 1px solid black; } line{ stroke: red; stroke-width: 10px; stroke-linecap: butt; stroke-dasharray: 300px; stroke-dashoffset: 300px; animation: move 1s linear infinite alternate-reverse; } @keyframes move{ 0%{ stroke-dashoffset: 300px; } 100%{ stroke-dashoffset: 0; } } </style> </head> <body> <svg width="500" height="500"> <line x1="100" y1="100" x2="400" y2="100"></line> </svg> </body> </html>
八、JS操作Svg
8.1
獲取路徑總長度
line{ stroke: red; stroke-width: 10px; stroke-linecap: butt; stroke-dasharray: 300px; stroke-dashoffset: 300px; } </style> </head> <body> <svg width="500" height="500"> <line x1="100" y1="100" x2="400" y2="100"></line> </svg> <script> var svg = document.getElementsByTagName('svg')[0]; var line = document.getElementsByTagName('line')[0]; console.log(line.getTotalLength( )); </script>
獲取路徑上距離起點距離與x長度點距離
line{ stroke: red; stroke-width: 10px; stroke-linecap: butt; stroke-dasharray: 300px; stroke-dashoffset: 300px; } </style> </head> <body> <svg width="500" height="500"> <line x1="100" y1="100" x2="400" y2="100"></line> </svg> <script> var svg = document.getElementsByTagName('svg')[0]; var line = document.getElementsByTagName('line')[0]; console.log(line.getPointAtLength(50)); </script>
8.2
1. 創建svg元素需要指定命名空間
2. svg元素對象一般通過調用setAttribute()方法來設定屬性值
<style> svg { border: 1px solid red; } line { stroke: red; stroke-width: 10px; } </style> </head> <body> <script> var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); var line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); svg.setAttribute('width', 200); svg.setAttribute('height', 200); line.setAttribute('x1', 100); line.setAttribute('y1', 100); line.setAttribute('x2', 150); line.setAttribute('y2', 100); svg.appendChild(line); document.body.appendChild(svg); </script>
