内嵌SVG坐标可读可交互，外部SVG坐标不可见需间接处理；内嵌SVG能通过getScreenCTM和matrixTransform实现页面坐标到SVG坐标的精确转换，外部SVG则无法访问内部坐标或执行变换。
内嵌SVG（inline SVG）和外部SVG（如通过 <img>、<object> 或 CSS background-image 引入）在坐标处理上存在本质差异：内嵌SVG的元素直接参与DOM，其坐标系统可被JavaScript精确访问与操作；外部SVG则处于隔离上下文，无法直接读取内部坐标或执行变换。
内嵌SVG：坐标可读、可变、可交互
内嵌SVG的根 <svg> 元素及其子元素属于当前文档DOM树，所有坐标属性（x、y、cx、cy 等）和 transform 都可通过JS获取与修改。关键能力包括：
- 调用
getScreenCTM()获取从用户坐标系到屏幕坐标的变换矩阵 - 使用
createSVGPoint()+matrixTransform(CTM.inverse())将鼠标事件的页面坐标转为SVG内坐标 - 直接操作
<g>或图形元素的transform属性实现局部坐标系变换 -
viewBox和width/height共同决定缩放行为，但所有坐标计算仍基于用户坐标系
外部SVG：坐标不可见、需间接处理
通过 <img src="icon.svg"> 或 <object data="chart.svg"> 加载的SVG，浏览器将其视为“黑盒”图像资源：
- 无法通过父页面JS访问其内部元素、坐标或
viewBox - 鼠标事件只能获取相对于
<img>或<object>边框的坐标，无法映射到SVG内部逻辑点 -
<object>在部分浏览器中支持contentDocument访问，但受跨域限制且兼容性不稳定 - CSS背景图方式完全隔绝DOM与坐标信息，仅能控制整体缩放/定位
实际开发中的选择建议
若需动态坐标交互（如拖拽、点击定位、图表标注），必须采用内嵌SVG；若仅为静态图标展示且需复用或减小HTML体积，可选外部SVG，但要放弃坐标级控制：
- 图标类场景：优先用内联SVG，便于CSS着色、状态响应和无障碍支持
- 复杂图表或第三方SVG文件：若必须外链，可预先在SVG源中添加
id或data-属性，并改用<object>+ 安全域内通信（如 postMessage）传递简单指令 - 避免混合方案：不要对
<img>中的SVG做getBBox()或坐标转换，必然失败
一个典型坐标转换代码片段（仅适用于内嵌SVG）
监听点击并换算为 viewBox 内部坐标：
function screenToSVG(svgEl, x, y) {
const pt = svgEl.createSVGPoint();
pt.x = x; pt.y = y;
const ctm = svgEl.getScreenCTM();
return pt.matrixTransform(ctm.inverse());
}
svgElement.addEventListener('click', (e) => {
const p = screenToSVG(svgElement, e.clientX, e.clientY);
console.log(`x: ${p.x.toFixed(1)}, y: ${p.y.toFixed(1)}`); // 基于 viewBox 的归一化坐标
});
