基础画法:
<!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>
效果:
