寫這篇文章的緣由是因爲做dashboard的項目，圖形是svg的項目,參考的項目使用div寫的，然後爲了改樣式一直在套樣式，結果套不出來，也是醉了，整理了一下svg的基本格式，從w3c上整理的，詳細的列子參考https://www.w3school.com.cn/svg/svg_rect.asp
目錄
svg形狀
SVG 有一些預定義的形狀元素，可被開發者使用和操作：
- 矩形 <rect>
-
圓形 <circle>
- 橢圓 <ellipse>
- 線 <line>
- 折線 <polyline>
- 多邊形 <polygon>
- 路徑 <path>
矩形 <rect>
<rect>標籤可用來創建矩形,以及矩形的變種。
<rect x="20" y="20" width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)" fill-opacity:0.1;stroke-opacity:0.9
opacity:0.9 rx="20" ry="20"/>
代碼解釋：
rect 元素的 width 和 height 屬性可定義矩形的高度和寬度
style 屬性用來定義 CSS 屬性
x 屬性定義矩形的左側位置（例如，x="0" 定義矩形到瀏覽器窗口左側的距離是 0px）
y 屬性定義矩形的頂端位置（例如，y="0" 定義矩形到瀏覽器窗口頂端的距離是 0px）
CSS 的 fill 屬性定義矩形的填充顏色（rgb 值、顏色名或者十六進制值）
CSS 的 stroke-width 屬性定義矩形邊框的寬度
CSS 的 stroke 屬性定義矩形邊框的顏色
CSS 的 fill-opacity 屬性定義填充顏色透明度（合法的範圍是：0 - 1）
CSS 的 stroke-opacity 屬性定義筆觸顏色的透明度（合法的範圍是：0 - 1）
CSS 的 opacity 屬性定義整個元素的透明值（合法的範圍是：0 - 1）
rx 和 ry 屬性可使矩形產生圓角。
圓形 <circle>
<circle> 標籤可用來創建一個圓。
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
代碼解釋：
cx 和 cy 屬性定義圓點的 x 和 y 座標。如果省略 cx 和 cy，圓的中心會被設置爲 (0, 0)
r 屬性定義圓的半徑。
橢圓 <ellipse>
<ellipse> 標籤可用來創建橢圓。橢圓與圓很相似。不同之處在於橢圓有不同的 x 和 y 半徑，而圓的 x 和 y 半徑是相同的
<ellipse cx="300" cy="150" rx="200" ry="80"
style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2"/>
代碼解釋：
cx 屬性定義圓點的 x 座標
cy 屬性定義圓點的 y 座標
rx 屬性定義水平半徑
ry 屬性定義垂直半徑
線 <line>
<line x1="0" y1="0" x2="300" y2="300"
style="stroke:rgb(99,99,99);stroke-width:2"/>
代碼解釋：
x1 屬性在 x 軸定義線條的開始
y1 屬性在 y 軸定義線條的開始
x2 屬性在 x 軸定義線條的結束
y2 屬性在 y 軸定義線條的結束
多邊形 <polygon>
<polygon points="220,100 300,210 170,250"
style="fill:#cccccc;
stroke:#000000;stroke-width:1"/>
代碼解釋：
points 屬性定義多邊形每個角的 x 和 y 座標
折線 <polyline>
<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"
style="fill:white;stroke:red;stroke-width:2"/>
<path> 標籤
<path> 標籤用來定義路徑。
下面的命令可用於路徑數據：
- M = moveto
- L = lineto
- H = horizontal lineto
- V = vertical lineto
- C = curveto
- S = smooth curveto
- Q = quadratic Belzier curve
- T = smooth quadratic Belzier curveto
- A = elliptical Arc
- Z = closepath
註釋：以上所有命令均允許小寫字母。大寫表示絕對定位，小寫表示相對定位。
<path d="M250 150 L150 350 L350 350 Z" />
它開始於位置 250 150，到達位置 150 350，然後從那裏開始到 350 350，最後在 250 150 關閉路徑
SVG 濾鏡
在 SVG 中，可用的濾鏡有：
- feBlend
- feColorMatrix
- feComponentTransfer
- feComposite
- feConvolveMatrix
- feDiffuseLighting
- feDisplacementMap
- feFlood
- feGaussianBlur
- feImage
- feMerge
- feMorphology
- feOffset
- feSpecularLighting
- feTile
- feTurbulence
- feDistantLight
- fePointLight
- feSpotLight
SVG 高斯模糊
必須在 <defs> 標籤中定義 SVG 濾鏡。
<filter> 標籤用來定義 SVG 濾鏡。<filter> 標籤使用必需的 id 屬性來定義向圖形應用哪個濾鏡？
<filter> 標籤必須嵌套在 <defs> 標籤內。<defs> 標籤是 definitions 的縮寫，它允許對諸如濾鏡等特殊元素進行定義
<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)"/>
代碼解釋：
<filter> 標籤的 id 屬性可爲濾鏡定義一個唯一的名稱（同一濾鏡可被文檔中的多個元素使用）
filter:url 屬性用來把元素鏈接到濾鏡。當鏈接濾鏡 id 時，必須使用 # 字符
濾鏡效果是通過 <feGaussianBlur> 標籤進行定義的。fe 後綴可用於所有的濾鏡
<feGaussianBlur> 標籤的 stdDeviation 屬性可定義模糊的程度
in="SourceGraphic" 這個部分定義了由整個圖像創建效果
SVG 線性漸變
SVG 漸變必須在 <defs> 標籤中進行定義。
SVG 漸變
漸變是一種從一種顏色到另一種顏色的平滑過渡。另外，可以把多個顏色的過渡應用到同一個元素上。
在 SVG 中，有兩種主要的漸變類型：
- 線性漸變
- 放射性漸變
線性漸變
<linearGradient> 可用來定義 SVG 的線性漸變。
<linearGradient> 標籤必須嵌套在 <defs> 的內部。<defs> 標籤是 definitions 的縮寫，它可對諸如漸變之類的特殊元素進行定義。
線性漸變可被定義爲水平、垂直或角形的漸變：
- 當 y1 和 y2 相等，而 x1 和 x2 不同時，可創建水平漸變
- 當 x1 和 x2 相等，而 y1 和 y2 不同時，可創建垂直漸變
- 當 x1 和 x2 不同，且 y1 和 y2 不同時，可創建角形漸變
<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)"/>
代碼解釋：
<linearGradient> 標籤的 id 屬性可爲漸變定義一個唯一的名稱
fill:url(#orange_red) 屬性把 ellipse 元素鏈接到此漸變
<linearGradient> 標籤的 x1、x2、y1、y2 屬性可定義漸變的開始和結束位置
漸變的顏色範圍可由兩種或多種顏色組成。每種顏色通過一個 <stop> 標籤來規定。offset 屬性用來定義漸變的開始和結束位置。
SVG 放射性漸變
放射性漸變
<radialGradient> 用來定義放射性漸變。
<radialGradient> 標籤必須嵌套在 <defs> 中。<defs> 標籤是 definitions 的縮寫，它允許對諸如漸變等特殊元素進行定義
<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)"/>
代碼解釋：
<radialGradient> 標籤的 id 屬性可爲漸變定義一個唯一的名稱，fill:url(#grey_blue) 屬性把 ellipse 元素鏈接到此漸變，
cx、cy 和 r 屬性定義外圈，
而 fx 和 fy 定義內圈 漸變的顏色範圍可由兩種或多種顏色組成。
每種顏色通過一個 <stop> 標籤來規定。offset 屬性用來定義漸變的開始和結束位置。