SVG元素是标准DOM节点，可直接用JavaScript获取并修改属性实现图形更新、事件交互、平滑动画及数据绑定动态图表。
直接操作 SVG 元素的 DOM
SVG 嵌入 HTML 后，所有图形元素（如 <circle>、<rect>、<path>）都是标准 DOM 节点，可被 JavaScript 用 document.getElementById 或 querySelector 获取。修改其属性即可实时更新图形：
- 用 .setAttribute('cx', '120') 移动圆心横坐标
- 用 .style.fill = '#ff6b6b' 改变填充色（适用于 CSS 可控属性）
- 对 <path> 元素，可动态重写 d 属性生成新路径，比如根据数据生成折线轮廓
监听用户事件响应交互
SVG 元素支持原生事件，无需额外封装：
- 给 <rect class="bar"> 添加 addEventListener('click', handler) 实现点击高亮
- 监听 mousemove 在 <svg> 容器上，结合 getScreenCTM() 和 inverseMatrix 将鼠标位置转为 SVG 坐标系，实现气泡跟随效果
- mouseover/mouseout 可用于图标悬停缩放或文字提示显示
驱动平滑动画的两种主流方式
避免使用 setTimeout 循环修改属性，推荐以下高效方案：
- requestAnimationFrame：适合需要逐帧控制逻辑的场景，例如拖拽路径节点、物理模拟弹跳。每帧调用一次更新函数，浏览器自动同步刷新率
- SMIL 动画元素（如 <animate>）：声明式写法，直接写在 SVG 标签内。例如：<animate attributeName="r" from="10" to="40" dur="1.5s" repeatCount="indefinite"/>，由浏览器原生渲染，性能好且代码简洁
与数据绑定实现动态图表
SVG 非常适合构建轻量级可视化，不依赖大型库也能完成基础交互图表：
立即学习“Java免费学习笔记（深入）”；
- 用数组数据映射生成多个 <rect> 表示柱状图，高度通过 scaleY(data[i]) 计算
- 点击某根柱子时，用 filter 筛选对应数据并更新右侧详情面板
- 配合 <g transform="translate(x,y)"> 分组管理坐标系，让缩放、平移等操作更清晰可控
