基礎畫法:
<!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>
</head>
<body>
<!--(0,0)-----→ x 方向 (屏幕座標系)-->
<!---- | -->
<!--y ↓ 方向 -->
<svg width="800" height="600" preserveAspectRatio="xMidYMid meet" viewbox="0 0 800 600"
style="border:1px solid rgb(0,170,204)">
<!--- 畫線1--- x1,y1 起始點; x2,y2終點 -->
<line x1="0" y1="30" x2="800" y2="30" style="stroke: red;"></line>
<!-- 文字對齊1 -->
<text x="0" y="30">文字對齊1
<tspan alignment-baseline="baseline">baseline</tspan>
<tspan alignment-baseline="middle">middle</tspan>
<tspan alignment-baseline="central">central</tspan>
<tspan alignment-baseline="hanging">hanging</tspan>
<tspan alignment-baseline="before-edge">before-edge</tspan>
<tspan alignment-baseline="after-edge">after-edge</tspan>
<tspan alignment-baseline="mathematical">mathematical</tspan>
</text>
<!--- 畫線2-- x1,y1 起始點; x2,y2終點 -->
<line x1="0" y1="60" x2="800" y2="60" style="stroke: red;"></line>
<!-- 文字對齊2 -->
<text x="0" y="60">文字對齊2
<tspan dominant-baseline="baseline">baseline</tspan>
<tspan dominant-baseline="middle">middle</tspan>
<tspan dominant-baseline="central">central</tspan>
<tspan dominant-baseline="hanging">hanging</tspan>
<tspan dominant-baseline="text-before-edge">before-edge</tspan>
<tspan dominant-baseline="text-after-edge">after-edge</tspan>
<tspan dominant-baseline="mathematical">mathematical</tspan>
</text>
<!--- 畫線3-- x1,y1 起始點; x2,y2終點 -->
<line x1="0" y1="100" x2="800" y2="100" style="stroke: red;"></line>
<!-- 文字對齊3 -->
<text x="0" y="100">文字對齊3
<tspan baseline-shift="sub">sub</tspan>
<tspan baseline-shift="super">super</tspan>
<tspan baseline-shift="-60%">-60%</tspan>
<tspan baseline-shift="20px">20px</tspan>
</text>
<!-- 箭頭在 H5 SVG (二) 細講 -->
<defs>
<marker id="arrow" markerWidth="10" markerHeight="10" refx="0" refy="3" orient="auto"
markerUnits="strokeWidth">
<path d="M 0 0 L 0 6 L 9 3 z" fill="#f00" />
</marker>
</defs>
<line x1="295" y1="50" x2="95" y2="75" stroke="#000" stroke-width="1" marker-end="url(#arrow)" />
<!---------------------------------------------------------------------------->
<!---------------------------------------------------------------------------->
<!---------------------------------------------------------------------------->
<!---畫矩形--- x1,y1 起始點; x2,y2終點 ------------------------------------->
<rect x="4" y="140" width="50" height="50" style="stroke: black;fill: none;"></rect>
<!-- 中心點 -->
<ellipse cx="29" cy="165" rx="3" ry="3" style="stroke: #201f1a;fill: #26a4ca;">
</ellipse>
<!-- 左上 -->
<ellipse cx="4" cy="140" rx="3" ry="3" style="stroke: #201f1a;fill: #26a4ca;">
</ellipse>
<!-- 右上 -->
<ellipse cx="54" cy="140" rx="3" ry="3" style="stroke: #201f1a;fill: #26a4ca;">
</ellipse>
<!-- 左下 -->
<ellipse cx="4" cy="190" rx="3" ry="3" style="stroke: #201f1a;fill: #26a4ca;">
</ellipse>
<!-- 右下 -->
<ellipse cx="54" cy="190" rx="3" ry="3" style="stroke: #201f1a;fill: #26a4ca;">
</ellipse>
<!---------------------------------------------------------------------------->
<!---------------------------------------------------------------------------->
<!---------------------------------------------------------------------------->
<!--- 畫圓角矩形--- x1,y1 起始點; x2,y2終點, rx:x軸半徑, ry:y軸半徑,畫圓角 -->
<rect x="64" y="140" width="100" height="50" rx="3" ry="10" style="stroke: rgb(50, 59, 179);fill: #ffcccc;">
</rect>
<!-- 中心點 -->
<ellipse cx="114" cy="165" rx="3" ry="3" style="stroke: #201f1a;fill: #26a4ca;">
</ellipse>
<!-- 文字按中心點 水平/垂直居中 -->
<text x="114" y="165" text-anchor="middle" alignment-baseline="middle" style="font-size:9pt;">
rect
</text>
<!---------------------------------------------------------------------------->
<!---------------------------------------------------------------------------->
<!---------------------------------------------------------------------------->
<!--- 圓--- cx,cy圓心點; rx:x軸半徑, ry:y軸半徑 -->
<ellipse cx="225" cy="165" rx="50" ry="25" style="stroke: #201f1a;fill: #caa426;">
</ellipse>
<text x="180" y="165" alignment-baseline="central" style="font-size:9pt;">
ellipse
</text>
<!---------------------------------------------------------------------------->
<!---------------------------------------------------------------------------->
<!---------------------------------------------------------------------------->
<!---多段線------------------------------------------------>
<polyline points="300 140 365 150 365 165 " style="stroke: rgb(46, 49, 43);fill: #caa426;"></polyline>
<text x="300" y="165" alignment-baseline="central" style="font-size:9pt;">
polyline
</text>
<polyline points="370 140 385 150 365 185 400 185" style="stroke: rgb(46, 49, 43);fill:none;"></polyline>
<!---------------------------------------------------------------------------->
<!---------------------------------------------------------------------------->
<!---------------------------------------------------------------------------->
<!---多邊形----(x,y爲一組)-------------------------------------------->
<polygon points="420 140 440 150 485 205 420 205" style="stroke: rgb(46, 49, 43);fill: #4cca26;"></polygon>
<text x="420" y="165" alignment-baseline="central" style="font-size:9pt;">
polygon
</text>
<!---------------------------------------------------------------------------->
<!---------------------------------------------------------------------------->
<!---------------------------------------------------------------------------->
<!-- M:moveTo L:lineTo 大寫表示絕對座標, 小寫表示已當前path的相對座標(l -10 20 ->L 500-10 = 490 180+20 = 200)-->
<path d="M 500 140 L 530 180 L 500 180 l -10 20" style="stroke: rgb(122, 189, 202);fill: #27850b;"></path>
<!-- M:moveTo h:水平 v:垂直, 大寫表示絕對座標,小寫表示已當前path的相對座標-->
<path d="M 560 140 h 20 v 50 " style="stroke: rgb(122, 189, 202);fill:none;"></path>
<!-- M:moveTo h:水平 v:垂直, 大寫表示絕對座標,小寫表示已當前path的相對座標-->
<path d="M 590 140 v 50 h 50 v -50 h -50 " style="stroke: rgb(122, 189, 202);fill:#2c0b85;"></path>
<!-- A:參1(rx):x軸半徑 參2(ry):y軸半徑 參3(x-axis-rotation):此弧段所在的X軸與水平方向的夾角，即X軸的旋轉角度(°)
參4(large-arc-flag):0劣弧(<180) 1優弧(>180) 參5(sweep-flag):0逆時針 1代表從起點到終點弧線繞中心順時針方向
參6(x):x終點座標 參7(y):y終點座標 -->
<path d="M 660 140 a 200 50 0 0 1 0 50" style="stroke: rgb(122, 189, 202);fill:#56850b;"></path>
<text x="500" y="165" dy="0.5em" text-anchor="middle" style="font-size:9pt;">
path
</text>
</svg>
</body>
</html>
效果:
