标签必须声明 xmlns（独立文件时必需）、width 和 height（不设则默认300×150）、viewbox（强烈建议，实现缩放与响应式），其中 viewbox="0 0 w h" 定义内部坐标系，是图形可缩放的关键。
直接在 HTML 中写 <svg></svg> 标签是最常用、最可控的方式，不需要额外加载或解析，所有基础图形都靠几个核心标签 + 属性组合实现。
如何正确声明 SVG 画布（<svg></svg> 标签必须带什么属性）
不设 width 和 height，浏览器会按默认 300×150 渲染，但内容可能被裁剪；不设 viewBox，缩放和响应式就基本失效。
-
width和height控制元素在页面中占用的 CSS 尺寸（可为像素或百分比） -
viewBox="0 0 100 100"定义内部坐标系：前两个数是左上角原点x、y，后两个是宽高单位值；它让图形真正“可缩放” - 单独使用
viewBox不设width/height时，<svg></svg>会塌缩成 0×0，必须至少指定一个尺寸 - 在 HTML 内联使用时，
xmlns属性不是必需的（现代浏览器自动识别），但保存为独立.svg文件时必须加上
<rect></rect>、<circle></circle>、<ellipse></ellipse> 的坐标与半径含义差异
这三个标签看着像，但坐标系统逻辑不同，容易画偏位置。
-
<rect></rect>：用x、y表示左上角顶点，不是中心；rx和ry控制圆角，设相同值才得到标准圆角矩形 -
<circle></circle>：必须用cx、cy（center x/y）+r（radius），x/y属性在这里无效 -
<ellipse></ellipse>：同样用cx、cy定义中心，但用rx（x-axis radius）、ry（y-axis radius）分别控制横向和纵向半径 - 所有坐标单位都是抽象的“用户单位”，实际像素映射由
viewBox和容器尺寸共同决定
为什么 <line></line> 看不见？常见描边设置误区
<line></line> 默认没有填充（fill 无效），只靠描边显示；漏设 stroke 或 stroke-width 就等于没画。
-
stroke必须显式设置颜色，例如stroke="black"或stroke="#333"，不能依赖继承 -
stroke-width默认为 1，但在高 DPI 屏幕或缩放后可能视觉过细，建议至少设为1.5或2 -
stroke-linecap影响端点形状："round"比"butt"更柔和，"square"会多出半个线宽的延伸 - 如果线段完全重叠（如
x1="10" y1="10" x2="10" y2="10"），即使设了描边也看不到——得确保两点不重合
<polygon></polygon> 和 <polyline></polyline> 的 points 属性怎么写才不出错
points 是纯字符串，空格和逗号混用容易引发解析失败，尤其当坐标含负数或小数时。
- 格式必须是
"x1,y1 x2,y2 x3,y3"或"x1,y1,x2,y2,x3,y3"，不能有换行、制表符或中文标点 - 每个点必须成对出现，少一个数字就会导致后续全部偏移；例如
"10,20 30,40 50"中第三个点缺y，浏览器可能忽略整段 -
<polygon></polygon>自动闭合路径（首尾点连线），<polyline></polyline>不闭合，需手动加回起点才能形成封闭区域 - 如果要用 JS 动态生成
points，推荐用arr.map(p => `${p.x},${p.y}`).join(' ')，避免拼接错误
真正难的不是画出一个图形，而是让多个图形在不同屏幕、不同缩放比例下保持相对位置和比例一致——viewBox 是钥匙，但它的值必须和内部所有 x/y/cx/cy 等数值协同设计，而不是随便填个 "0 0 100 100" 就完事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
