x 和 y 是 的局部坐标系偏移量，非绝对画布位置；其实际显示位置由当前坐标系原点（可能被 transform、嵌套 或 viewBox 改变）决定，且不响应 CSS 定位，动态偏移应优先用 transform。
x 和 y 是 <rect></rect> 元素的**局部坐标系起点**，不是“图形左上角在画布上的绝对位置”，而是“从当前坐标系原点出发的偏移量”——这个区别直接决定你改了值却没看到图形移动的原因。
为什么设置了 x="100" 图形却没出现在 (100, 0)？
因为 x 和 y 的计算基准是当前生效的坐标系原点，而这个原点可能已被 transform="translate()"、嵌套 <g></g> 或父级 viewBox 改变。
- 单独写
<rect x="100" y="20"></rect>：图形左上角确实在画布 (100, 20) - 但若外层有
<g transform="translate(30, 40)"></g>：实际位置变成 (130, 60)，x/y值本身不变 -
viewBox="0 0 200 100"+width="400"会缩放整个坐标系，x="100"最终像素位置是 200px（放大 2 倍）
x 和 y 与 CSS left/top 的根本区别
CSS 的 left/top 是相对于最近定位祖先的偏移；SVG 的 x/y 是**绘图指令的一部分，参与坐标变换链**。
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 修改
element.setAttribute('x', '50')只影响该矩形在当前坐标系内的起始点，不改变其transform - 用 CSS 设置
svg rect { left: 50px; }完全无效——SVG 元素不响应盒模型定位属性 - 想用 JS 动态偏移？优先改
transform，而非反复读写x/y，避免和已有变换冲突
什么时候必须用 x/y，而不是 transform？
当你要做**路径动画、clipPath 引用、或需要被其他 SVG 元素（如 <use></use>）复用时，x/y 是唯一能被正确继承和解析的位移方式。
立即学习“前端免费学习笔记（深入）”；
-
<symbol></symbol>内部的<rect x="10" y="10"></rect>，被<use></use>引用后，x/y仍参与最终定位计算 - 但若你在
<symbol></symbol>里写transform="translate(10,10)"，<use></use>无法再通过自身transform精确叠加偏移 - 用
<path d="M10,10 h100 v50 z"></path>模拟矩形时，没有x/y属性，只能靠d中的坐标或外层transform
真正容易被忽略的是：DOM 中读取 element.getAttribute('x') 永远返回原始字符串，它不包含任何 transform 偏移；而视觉位置是所有变换矩阵累乘的结果——要算真实屏幕坐标，得用 getCTM()，不能手算加法。
