javascript操作svg需注意命名空间、属性设置及几何获取：创建元素用createelementns；设fill等属性用setattribute；事件可直接监听；几何信息须用getbbox()或getctm()而非offset系列。
JavaScript 操作 SVG 内部节点与属性，和操作普通 HTML DOM 基本一致，但需注意 SVG 的命名空间、属性写法及部分 API 差异。关键在于：用标准 DOM 方法获取元素，用 setAttribute/getAttribute 处理 SVG 特有属性（如 cx、fill、transform），对动画或复杂变换优先用 getCTM() 和 getBBox() 获取真实几何信息。
获取 SVG 元素要区分命名空间
SVG 元素属于 http://www.w3.org/2000/svg 命名空间，直接用 document.getElementById 或 querySelector 可以获取，无需额外处理；但用 document.createElement 创建 SVG 元素时，必须用 document.createElementNS：
-
const circle = document.querySelector('circle');✅ 直接可用 -
const newRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');✅ 正确创建 -
const badRect = document.createElement('rect');❌ 会创建 HTML 元素，渲染异常
设置 SVG 属性优先用 setAttribute，避免 style 写法陷阱
SVG 大部分视觉属性（fill、stroke、opacity、r、viewBox）是元素自身属性，不是 CSS 样式。虽然部分可被 CSS 控制，但脚本中修改应统一用 setAttribute：
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
-
circle.setAttribute('fill', '#ff6b6b');✅ 推荐，语义清晰 -
circle.style.fill = '#ff6b6b';⚠️ 仅当该属性支持 CSS（如fill）才生效，且可能被内联样式覆盖 -
circle.setAttribute('transform', 'rotate(45 100 100)');✅ 必须用 setAttribute，style.transform不适用
响应交互事件要监听 SVG 原生元素，支持冒泡
SVG 元素（<circle></circle>、<path></path>、<g></g> 等）原生支持 click、mouseover、mousemove 等事件，可直接绑定：
rect.addEventListener('click', () => { rect.setAttribute('fill', 'gold'); });- 组合图形建议包裹在
<g></g>中并监听其事件，再用event.target区分子元素 - 拖拽场景中，用
getScreenCTM()+inverse()将鼠标坐标转为 SVG 坐标系，避免缩放/平移错位
获取几何信息要用 SVG 特有方法，别依赖 offsetTop/offsetLeft
SVG 元素没有 offsetTop、clientWidth 等 HTML 布局属性。真实位置和尺寸需用 SVG 接口：
-
elem.getBBox()→ 返回对象{x, y, width, height}，基于元素自身坐标系 -
elem.getCTM()→ 返回当前变换矩阵，配合inverse()可做坐标转换 -
svgElement.getBoundingClientRect()✅ 可用，返回屏幕像素位置（含缩放影响），适合做绝对定位参考
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
