SVG绘图速查 markdown中

嵌入svg代码

<svg width="300" height="300"> 
<circle cx="100" cy="50" r="40" stroke="#ccc" stroke-width="2" fill="#c00" /> 
<circle cx="200" cy="150" r="80" fill="#009" />
</svg>

编辑svg文件

在vscode中添加svg - jock扩展
通过预览窗口可以查看svg效果

基本图形

<svg width=600 height=400>
通用属性 fill,stroke,stroke-width

text 文本 x y font-family font-size text-anchor文本对齐(start,middle,end)
<text x=450 y=25 fill="#c90"
            font-family="Arial" font-size=30 
            text-anchor="start" 
            transform="rotate(15 0,0)"
            
            >
Hello, <tspan  fill="#c00">SVG!</tspan>
<tspan x=450 y=35  fill="#c09">.</tspan>
</text>

rect 矩形 x,y,width,height,rx 圆角x,ry 圆角y
<rect x=10 y=10 width=20 height=20 rx=5 fill="#c99" stroke="#c2c2c2" stroke-width=2 />  
<text x=50 y=25 fill="#ccc">rect 矩形 x,y,width,height,rx,ry</text>

circle 圆形 cx,cy,r 
<circle cx=20 cy=60 r=20 fill="#cc9" /> 
<text x=50 y=65 fill="#ccc">circle 圆 cx,cy,r</text>

ellipse 椭圆 cx,cy,rx,ry
<ellipse cx=20 cy=100 rx=20 ry=10 fill="#9c9" /> 
<text x=50 y=105 fill="#ccc">ellipse 椭圆 cx,cy,rx,ry</text>

polygon 多边形 points='x1,y1,x2,y2,...'
<polygon points="10,120,30,120,20,140,10,120" fill="#9cc" />
<text x=50 y=135 fill="#ccc">polygon 多边形 points='x1,y1,x2,y2,...'</text>

line 直线 x1,y1,x2,y2
<line x1=10 y1=160 x2=30 y2=160 stroke="#99c" stroke-width=4 />
<text x=50 y=165 fill="#ccc">line 直线 x1,y1,x2,y2</text>

polyline 多段线 points='x1,y1,x2,y2,...'
<polyline points="10,180,25,180,20,190,25,200"  fill="none"  stroke="#99c" stroke-width=4 />
<text x=50 y=195 fill="#ccc">polyline 多段线 points='x1,y1,x2,y2,...'</text>

path 路径 d='path-data'
path-data: M,L,H,V,C,S,Q,T,A,Z
- 移动 M x y
- 闭合路径 Z 
- 画线到 L x y
- 水平到 H x
- 垂直到 V y
- 椭圆弧 A [开始坐标] rx ry x-axis-rotation x轴旋转角度 large-arc-flag (1大弧 0 小弧) sweep-flag 弧线方向（0逆时针1顺时针） x y 终坐标
- 三次贝塞尔 C x1 y1 控制点1 x2 y2 控制点2 x y 终坐标
- 三次贝塞尔到 S x2 y2 控制点2 x y 终坐标
- 二次贝塞尔 Q x1 y1 控制点 x y 终坐标
- 二次贝塞尔到 T x y 终坐标
<path d="M 10 210 L 20 220 H 30 V 240 L 10 240  Z" fill="#9c0" stroke="none" />
<text x=50 y=235 fill="#ccc">path 移动 M x y 画线到 L x y 水平到 H x  垂直到 V y 闭合路径 Z'</text>

<path d="M 10 250 A 10 20 90 0 1 40 270  Z" fill="#9c0" stroke="none" />
<path d="M 10 250 A 10 20 90 0 0 40 270  Z" fill="#c90" stroke="none" />
<text x=60 y=265 fill="#ccc">path 椭圆弧 A rx ry x角度 (1大弧 0 小弧)  (0逆1顺时针) x y 终坐标'</text>

<path d="M 10 290 C 20 280 50 280 20 300 S 60 310 60 300" stroke="#09c" stroke-width=2 fill="none" />
<text x=70 y=310 fill="#ccc">path 三次贝塞尔 C x1 y1 x2 y2 x y S x2 y2 x y'</text>

<path d="M 10 320 Q 30 320 30 350 T 40 350" stroke="#0c9" stroke-width=2 fill="none" />
<text x=60 y=350 fill="#ccc">path 二次贝塞尔 Q x1 y1 x y T x y'</text>
</svg>

参考

> 09 svg中path的使用: https://blog.csdn.net/weixin_42289080/article/details/130690338
> SVG 教程: https://www.runoob.com/svg/svg-tutorial.html