www.w3schools.com/graphics/sv… www.runoob.com/svg/svg-pat…
1、svg 画一个实心圆
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
其中,cx和cy属性指定了圆心的坐标,r属性指定了圆的半径,stroke属性指定了描边的样式和颜色,stroke-width属性指定了描边的宽度,fill属性指定了填充的颜色。
2、椭圆
<ellipse cx="179" cy="179" rx="10" ry="10" class=""></ellipse>
这是一个SVG元素,表示一个椭圆。它的中心坐标是(179, 179),外径是10,内径也是10。类名为"",可能用于设置椭圆的填充颜色和描边颜色。
3、path
<path d=" M155.01854727741454,179 L0 89.50000000000001 A179,179 0 0 1 310.0370945548291,89.50000000000001 z " fill="none" stroke="#000000" stroke-width="3" stroke-linejoin="round" stroke-dasharray="0"></path>
解释
<path d="M150 0 L75 200 L225 200 Z" style="fill:none;stroke:green;stroke-width:3" />
解释
一条从位置 150,0 开始的路径,一条线到位置 75,200,然后从那里,一条线到 225,200,最后关闭返回到 150,0 的路径
d
M = moveto (move from one point to another point)
L = lineto (create a line)
H = horizontal lineto (create a horizontal line)
V = vertical lineto (create a vertical line)
C = curveto (create a curve)
S = smooth curveto (create a smooth curve)
Q = quadratic Bézier curve (create a quadratic Bézier curve)
T = smooth quadratic Bézier curveto (create a smooth quadratic Bézier curve)
A = elliptical Arc (create a elliptical arc)
Z = closepath (close the path)
M = 移动到 (从一个点移动到另一个点)
L = 直线连接 (创建一条直线)
H = 水平直线连接 (创建一条水平线)
V = 垂直直线连接 (创建一条垂直线)
C = 曲线连接 (创建一条曲线)
S = 平滑曲线连接 (创建一条平滑曲线)
Q = 二次贝塞尔曲线 (创建一条二次贝塞尔曲线)
T = 平滑二次贝塞尔曲线连接 (创建一条平滑二次贝塞尔曲线)
A = 椭圆弧 (创建一个椭圆弧)
Z = 关闭路径 (关闭路径)