- svg 标签
xmlnsviewBox- 形状
- 矩形
rect
- 圆形
circle
- 椭圆
ellipse
- 线条
line
- 多边形
polygon
- 折线
polyline
- 路径
path
- 通用属性
stroke: 边框颜色stroke-width: 边框宽度fill: 填充颜色style
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body style="background-color:beige;width:800px;margin:0 auto;">
<svg id="example" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 800">
<!--
-->
<rect
x="0"
y="0"
width="100%"
height="100%"
fill="none"
stroke="rgb(99,99,99)"
stroke-width="2"
/>
<line
x1="800"
y1="0"
x2="0"
y2="800"
style="stroke:rgb(99,99,99);stroke-width:2"
/>
<line
x1="0"
y1="0"
x2="800"
y2="800"
style="stroke:rgb(99,99,99);stroke-width:2"
/>
<circle cx="400" cy="400" r="100" />
<ellipse cx="400" cy="150" rx="120" ry="60" />
<polygon points="250,300 130,520 50,350" />
<polygon points="80,40 120,60 80,80 60,120 40,80 0,60 40,40 60,0 80,40" />
<polyline
points="150,750 170,800 190,750 210,800 230,750"
fill="none"
stroke="rgb(99,99,99)"
stroke-width="2"
/>
<rect x="550" y="325" width="200" height="150" />
<text
xml:space="preserve"
text-anchor="start"
font-family="Helvetica, Arial, sans-serif"
font-size="24"
x="400"
y="600"
fill-opacity="null"
stroke-opacity="null"
stroke-width="0"
stroke="#000"
fill="#000000"
>
@
</text>
<!--
https://editor.method.ac/#move_front
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="m395.5,698c0,0 1,0 4,0c4,0 8.29361,2.7265 12,7c3.276,3.77728 6.54135,7.7027 8,11c1.66803,3.77063 1.79395,8.08746 4,13c1.83203,4.07965 3,6 3,8c0,2 0,3 0,5c0,2 0.70709,3.29291 0,4c-0.70709,0.70709 -3,1 -4,1c-1,0 -3,0 -4,0c-1,0 -3,0 -4,0c-1,0 -2,0 -3,0c-1,0 -2.186,0.30743 -4,-1c-1.14728,-0.8269 -2,-2 -2,-3c0,-1 -0.22977,-3.02673 0,-4c0.51373,-2.17627 2.07339,-2.93164 3,-4c3.276,-3.77728 6,-7 9,-10c3,-3 4.79489,-5.22021 8,-8c3.77728,-3.276 6.21167,-5.71411 9,-8c2.18735,-1.79321 4.186,-2.69257 6,-4c2.29453,-1.65381 3,-2 4,-2l1,0l2,-1l1,0"
fill-opacity="null"
stroke-opacity="null"
stroke-width="2"
stroke="#000"
fill="none"
/>
</svg>
</body>
</html>
