svg原生图形元素（如circle、rect）不支持css的transform-origin，浏览器直接忽略；应使用svg原生transform属性（如rotate(45 100 100)）或包裹在中控制原点。
SVG元素根本不响应CSS的transform-origin
这不是“偏移”，是压根没生效。SVG规范明确禁止<circle></circle>、<rect></rect>、<path></path>等原生图形响应CSS的transform-origin声明——浏览器看到它就直接忽略。你写的transform-origin: center在Chrome、Firefox、Safari里都等于没写，只有顶层<svg></svg>或<g></g>可能部分支持，但行为不可靠。
常见错误现象：transform: rotate(45deg)后元素“飞走”或完全不动，不是动画卡了，是它正绕着(0, 0)（viewBox左上角）疯狂旋转，而你误以为中心该是圆心。
- SVG图形默认变换原点就是
0 0，不是HTML元素的50% 50% -
transform-origin: center在旧版Safari（≤13.1）和某些Android WebView中会被直接丢弃，必须写成transform-origin: 50% 50%或transform-origin: 100px 100px - 百分比值（如
50% 50%）是相对于viewBox宽高，不是元素自身尺寸；没有viewBox时，结果完全不可控
用transform属性替代CSS transform-origin
跨浏览器最稳的方案，是放弃CSS路径，直接用SVG原生transform属性。它不依赖CSS解析，所有SVG 1.1兼容环境都认。
例如：<circle cx="100" cy="100" r="40" transform="rotate(45 100 100)"></circle>，其中rotate(45 100 100)的后两个参数就是绝对坐标原点，精准锚定圆心。
- 不用管
transform-box——它对<circle></circle>基本无效，Chrome/Firefox/Safari都忽略 - 动态旋转时，用JS更新
element.setAttribute('transform', 'rotate(... ' + x + ' ' + y + ')')，比反复改style.transformOrigin性能高，且不触发强制重排 - 若需分层控制（如钟摆效果），用
<g transform="translate(x, y)"></g>包一层，子元素再做rotate，把原点抽象为容器位移
内联SVG时盒模型干扰放大定位误差
当<svg></svg>作为内联元素嵌入HTML，padding、border、line-height和vertical-align会叠加影响视觉位置。尤其display: inline下，SVG按基线对齐文字，顶部常被“吊高”，路径看起来上移——这时再加transform: scale()，错位会翻倍。
- 强制设
display: block，剥离行内布局干扰 - 父容器避免用
text-align: center居中SVG，改用display: flex或margin: auto -
transform: scale(1.5)必须配transform-origin: top left（尤其左对齐图标），否则缩放中心默认50% 50%会让图标“飘”出预期位置 - 确认父容器没设
overflow: hidden或clip-path，否则旋转后超出的部分会被意外裁剪
全局scale导致坐标系错乱，事件定位失效
大屏项目常用根容器transform: scale(calc(...))实现响应式缩放，但这会让百度地图、ECharts等依赖绝对坐标的库误判鼠标位置——event.clientX/Y返回的是设备像素坐标，而内部仍按原始尺寸计算，点击缩放中心严重偏移。
- 临时解法：监听缩放因子，在事件处理器里手动校正：
const x = e.offsetX / scale - 更稳妥方式：放弃全局
transform: scale，改用width/height+font-size缩放，或用CSS自定义属性配合calc() - 若必须用
transform: scale，确保地图/图表容器本身不带额外transform，否则坐标变换链会叠加失控
真正容易被忽略的，是以为写了transform-origin: center就万事大吉——它在SVG里根本不是默认行为，且在跨端场景下连“写对了”都不保证执行。要么切到SVG原生transform属性，要么把整个SVG套进<div>里用CSS控制，别在中间地带硬扛兼容性。</div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
