svg中绘制实心矩形需用标签，设x、y（左上角）、width、height及fill；圆用（cx、cy、r），椭圆用（cx、cy、rx、ry）；多边形用配points坐标序列；直线必须设stroke才可见；所有坐标原点在左上角。
直接用 <svg></svg> 标签包裹原生 SVG 元素就能画出不失真的基础图形，不需要 JS、不依赖第三方库，浏览器原生支持。
怎么用 <rect></rect> 画实心矩形
<rect></rect> 是最直白的矩形绘制方式，关键在 x、y（左上角起点）、width 和 height。默认不填充，必须加 fill 才实心。
-
rx和ry控制圆角，设为相同值就是标准圆角矩形；只设rx而不设ry，浏览器会自动把ry等于rx - 如果同时设置了
stroke和fill，描边会压在填充之上，描边宽度从图形边界向外延伸一半、向内延伸一半 - 别漏写
width和height—— 没这两个属性，<rect></rect>会不可见，哪怕fill写了也没用
<svg width="200" height="150"><rect x="20" y="30" width="120" height="80" fill="#e74c3c"></rect></svg>
怎么用 <circle></circle> 和 <ellipse></ellipse> 画圆和椭圆
<circle></circle> 只需 cx、cy 和 r，而 <ellipse></ellipse> 多一个 rx 和 ry，分别控制横纵半径。两者都靠 fill 实现实心。
-
<circle cx="0" cy="0" r="50"></circle>会画出一半在 SVG 画布外——因为坐标原点在左上角，不是中心 - 想让圆居中显示，得确保
cx≥r且cy≥r，否则会被裁剪 -
<ellipse></ellipse>的rx和ry不能为 0，否则图形消失；负值会被忽略
<svg width="200" height="120"><circle cx="60" cy="60" r="40" fill="#2ecc71"></circle><ellipse cx="150" cy="60" rx="35" ry="20" fill="#9b59b6"></ellipse></svg>
怎么用 <polygon></polygon> 画任意闭合多边形
<polygon></polygon> 靠 points 属性定义顶点序列，坐标对之间用空格或逗号分隔，x 和 y 用逗号连接。它自动闭合首尾，所以不用重复写第一个点。
-
points="0,0 100,0 100,100"画的是直角三角形，不是三条线段——<polygon></polygon>必然形成封闭区域 - 点顺序影响渲染：顺时针和逆时针都可，但涉及
fill-rule（如evenodd）时行为不同，简单实心填充默认用nonzero规则，一般不用改 - 坐标值里混用空格和逗号是安全的，比如
"0,0 50,30,100,0"会被正确解析为三个点；但结尾多一个逗号（如"0,0,50,30,"）会导致最后一个点失效
<svg width="200" height="150"><polygon points="50,15 100,100 0,100" fill="#3498db"></polygon></svg>
为什么 <line></line> 总是“看不见”
<line></line> 默认无填充、无描边，纯透明。它只有长度和方向，没有面积，所以不设 stroke 就等于没画。
-
stroke-width默认是 1，但若设为 0，线就彻底消失；小于 1（比如 0.5）在高 DPI 屏幕上可能渲染异常 -
stroke必须显式声明颜色，stroke="black"或stroke="#000"都行，但stroke=""或缺失该属性，线不可见 - 它不响应
fill属性——填了也无效；想加端点样式，得用stroke-linecap（butt/round/square）
<svg width="300" height="50"><line x1="20" y1="10" x2="280" y2="10" stroke="red" stroke-width="3"></line></svg>
真正容易被忽略的，是 SVG 坐标系原点始终在左上角，所有 x/y 值都是相对这个点计算的；缩放、平移、居中这些操作，不是靠调参数“猜”，而是得老老实实算偏移量——比如想让一个 r="40" 的圆在 200×150 的 <svg></svg> 中居中，cx 就得是 100，cy 得是 75。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
