教程參考：https://www.w3school.com.cn/svg/index.asp
備忘錄，直接代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin: 0;padding:0;}
#d1{text-align: center;stroke-width:1;
stroke:rgb(0,0,0)} /* 讓svg居中*/
svg{width: 1200px;height: 700px;border: 1px solid #ccc;margin: 50px 0;}
rect{
width:500px;height: 500px;
/*在這裏border 和 background 是無效的*/
/*border: 1px solid #ccc; 邊框要用 stroke來設置*/
/*background: #ffa; 背景填充色要用 fill*/
fill:#faf;
stroke-width:2;
stroke:#0a8ed3;
}
</style>
</head>
<body>
<!--svg中的樣式大部分都可以當做其他元素一樣，由CSS來定義樣式，但也只是大部分，有些還是單獨處理的，比如邊框，背景色等-->
<div id="d1">
<svg>
<!--如果圖形不設置座標點，默認基本上都是0，單位默認是px-->
<!--矩形標籤： rect-->
<!--從svg左上角水平30像素，垂直50像素的地方開始畫 rx 和 ry 類似於border-radius,用來定於倒角 單位默認是px,另外 % 也是可以的，都定義爲50% 就可以用rect直接畫個圓了-->
<rect x="30" y="50" rx="5" ry="5" />
<!--圓形標籤：circle-->
<!--cx，cy 圓形中間點的座標位置， r 半徑長度-->
<circle cx="100" cy="150" r="50" style="fill:#0f0;" />
<!--橢圓標籤：ellipse-->
<!--這裏的rx 指的是水平半徑 ry 是垂直半徑 不能跟倒角那個混淆了-->
<ellipse cx="500" cy="350" rx="100" ry="150" style="fill:#afa;"/>
<!--線條標籤：line-->
<!--這個標籤會有4個座標值 x1：x軸開始位置 y1 ：y軸開始 x2：x軸結束 y2：y軸結束-->
<line x1="10" y1="10" x2="300" y2="300" style="stroke:#fea;stroke-width:2"/>
<!--折線標籤：polyline-->
<!--說是折線，用起來更像是多邊形的感覺，默認也是有黑的填充色，如果只是要單純的折線效果，記得一定要背景色改成透明的-->
<!--從水平500 垂直600開始， 依次畫到650,450 350,450 500,600-->
<polyline points="500,600 650,450 350,450 500,600" style="fill: transparent;stroke:red;stroke-width:2"/>
<!--多邊形標籤：polygon-->
<!--畫個平行四邊形： points座標： 從xz軸710 50開始畫，依次到850 50，800 200， 660,200，最後的座標會自動跟第一個鏈接起來-->
<polygon points="710,50 850,50 800,200 660,200" style="fill:#cccccc;stroke:#000000;stroke-width:1"/>
<!--路徑標籤：path-->
<!--這個是標籤中最複雜的一個，先畫個例子，詳細註釋在下面，-->
<!--從750 350開始畫，然後畫到850 350，再到950 550， 800 500 Z閉合路徑，用來把最後畫的點和第一個點連接起來-->
<path d="M750 350 L850 350 L950 550 L800 500 Z" style="fill:#cccccc;" />
<!--下面的命令可用於路徑數據：（用法類似於canvas的畫線操作，默認會有黑色邊框黑色填充）-->
<!--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-->
<!--以上所有命令均允許小寫字母。大寫表示絕對定位，小寫表示相對定位。-->
</svg>
</div>
</body>
</html>