关键不是调width和height，而是配好viewBox；viewBox定义内部坐标系，配合CSS宽高（如width:100%;height:auto）和preserveAspectRatio可实现等比缩放、防变形、保清晰。
直接在 HTML 里写 <svg></svg> 标签就能画图，不需要额外库或构建步骤——但画得准、缩得稳、动得顺，得避开几个硬坑。
怎么让 SVG 在不同屏幕下都清晰不模糊
关键不是调 width 和 height，而是配好 viewBox。只设宽高会让图形被拉伸或裁剪；只设 viewBox 不设宽高则可能塌成一条线。
-
viewBox="0 0 100 100"定义的是内部坐标系：左上角是 (0,0)，右下角是 (100,100) - 再用 CSS 控制显示尺寸，比如
style="width: 100%; height: auto;"，图形就会等比缩放 - 如果要固定宽高比（比如图标容器），加
preserveAspectRatio="xMidYMid meet"防止变形 - 别在
<svg></svg>上写死像素值如width="24px"，改用相对单位或 CSS 控制
为什么 的 d 属性总画不对
d 是命令流，不是数学公式，大小写、空格、顺序全影响结果。浏览器解析到第一个错误就停，后面整条路径可能不渲染。
-
M（大写）后必须跟两个数字，表示绝对起点；m（小写）是相对移动，也必须有坐标 -
Z或z表示闭合，后面不能跟任何坐标，写了也会被忽略 - 贝塞尔曲线
C x1 y1 x2 y2 x y要接满六位数，少一个就降级为直线，甚至报错不显示 - 导出工具生成的
d常带多位小数（如23.456789），手动截成23.46更易读且无视觉差异
rect/circle/polygon 这些基础标签怎么避免定位偏移
SVG 坐标原点在左上角，不是居中——这是新手最常懵的地方。比如 <circle cx="50" cy="50" r="20"></circle> 的圆心真正在画布左上角往右下各 50 像素处，不是“居中”。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
-
<rect x="0" y="0"></rect>从左上角开始画，不是从中心；想居中矩形？得算：x = (width - rectWidth) / 2 -
<circle></circle>的cx/cy是圆心，不是左上角；但如果你没设viewBox，而只靠width/height，数值容易错位 -
<polygon points="10,10 90,10 50,90"></polygon>中每个点都是绝对坐标，别漏逗号或空格，否则整个多边形崩掉 - 调试时临时加
style="border: 1px solid red;"到<svg></svg>上，能看清画布边界和实际位置关系
怎么给 SVG 加交互又不卡顿
别对 d 属性做 CSS transition——浏览器根本不支持这个属性的过渡动画，写了等于白写。
- 想实现“描边绘制”效果（比如线条一笔画出来），用
stroke-dasharray+stroke-dashoffset配合 JS 动态计算getTotalLength() - 想移动/旋转整个图形，优先用
transform="translate(10,20)"或 CSStransform，性能远好于重写d - 需要响应点击或 hover，直接给
<path></path>或<circle></circle>加cursor: pointer和事件监听，不用套<g></g>层叠太多 - 大量动态 SVG（比如实时图表），避免频繁
innerHTML替换整个<svg></svg>，改用setAttribute()或classList控制已有元素
真正难的从来不是画出一个圆，而是当设计稿要求“在 320px 宽手机上圆直径占 1/5，桌面端保持比例且 hover 时平滑缩放 1.2 倍”，你还得确保所有路径命令不出大小写错误、所有坐标算得准、所有动画不掉帧——这些细节堆起来，才是 SVG 落地的真实成本。
