内联svg是唯一支持javascript动态修改的嵌入方式，必须直接写入html或通过fetch+domparser注入，才能用setattribute、classlist或createelementns操控路径、圆等节点并实现交互动画。
SVG图形的动态修改，核心在于把它当作可编程的DOM结构来对待——不是“画图”，而是“操控节点”。只要SVG是内联在HTML中（即直接写在页面里的<svg></svg>标签），就能用标准JavaScript方法实时读取、修改、增删其中的<circle></circle>、<rect></rect>、<path></path>等元素，无需额外库。
确保SVG可被JS访问
只有内联SVG才能被JavaScript直接操作。用<img src="icon.svg">或<object></object>引入的SVG，其内部结构对外部脚本不可见。必须把SVG代码原样复制进HTML，或通过fetch加载后注入DOM。
- 推荐做法：直接在HTML中书写SVG，例如：
<svg id="myChart"><circle id="dot" cx="50" cy="50" r="10"></circle></svg> - 若SVG来自外部文件，需用
fetch()获取文本，再用DOMParser解析为DOM节点，最后插入到页面中 - 避免跨域问题：远程SVG需服务端配置
Access-Control-Allow-Origin响应头
修改图形属性的两种常用方式
SVG元素的属性既可通过setAttribute()统一设置，也可直接赋值（部分属性支持）。注意：坐标类属性（如cx、cy、r）属于SVG DOM接口的一部分，直接赋值时需访问.baseVal.value。
-
element.setAttribute('fill', '#333')—— 通用、安全，适用于所有属性 -
element.cx.baseVal.value = 80—— 针对动画/数值型属性更精确，但需注意命名空间和基值结构 - 样式类操作：
element.classList.add('highlight')或element.style.stroke = 'blue'，适合批量控制外观
动态创建SVG元素的关键步骤
不能用document.createElement()创建SVG元素，必须使用带命名空间的document.createElementNS()，否则浏览器无法识别。
- 命名空间固定为：
'http://www.w3.org/2000/svg' - 示例：
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); - 创建后需用
setAttribute()设置必要属性（cx、cy、r等），再用svgElement.appendChild(circle)挂载 - 批量插入建议先构建文档片段（
DocumentFragment），再一次性追加，减少重排重绘
响应交互与轻量动画实现
用户点击、悬停、数据更新等场景下，修改SVG应兼顾性能与流畅度。
- 事件绑定与HTML一致：
svg.addEventListener('click', handler)；注意SVG坐标系与屏幕坐标的差异，可用getScreenCTM()做转换 - 简单状态切换（如颜色、显隐）直接改属性即可，无需框架
- 连续动画优先用
requestAnimationFrame()，避免setTimeout导致卡顿；复杂路径动画可结合CSStransform或SMIL（但注意兼容性） - 高频更新时缓存元素引用（如
const dot = document.getElementById('dot')），避免重复查询DOM
