JavaScript操作SVG需用createElementNS指定命名空间，通过setAttribute修改属性，querySelector选取元素，path元素靠d属性绘制图形，并注意大小写敏感和坐标系等细节。
JavaScript 操作 SVG 的核心是把它当作 DOM 元素来处理——SVG 标签（如 、document.createElementNS 创建、用 setAttribute 修改属性、用 appendChild 添加，也能用 querySelector 选中并动态更新。
用脚本创建 SVG 元素
普通 document.createElement 不适用于 SVG，必须用命名空间（namespace）创建：
const svgNS = "http://www.w3.org/2000/svg";const svg = document.createElementNS(svgNS, "svg");const circle = document.createElementNS(svgNS, "circle");- 然后设置属性：
circle.setAttribute("cx", "50"); circle.setAttribute("cy", "50"); circle.setAttribute("r", "20"); - 最后挂载：
svg.appendChild(circle); document.body.appendChild(svg);
修改已有 SVG 图形
如果页面里已有内联 SVG（比如写在 HTML 中的 ），可直接用常规 DOM 方法操作：
const myCircle = document.querySelector("circle");- 改位置：
myCircle.setAttribute("cx", "100"); - 改样式：
myCircle.setAttribute("fill", "#ff6b6b"); - 改尺寸或颜色时，注意单位（如
stroke-width="2"是数字，不是"2px"） - 也可以用
myCircle.style.opacity = 0.7;控制 CSS 属性
动态绘制路径（path）和复杂图形
d 属性定义形状。脚本中可拼接字符串生成路径指令：
立即学习“Java免费学习笔记（深入）”；
const path = document.createElementNS(svgNS, "path");-
path.setAttribute("d", "M10 10 L90 10 L90 90 Z");（矩形轮廓） - 支持
M（移动）、L（直线）、C（贝塞尔曲线）、A（弧线）等命令 - 想画平滑折线？先算好控制点，再用
C或S指令；想响应鼠标？给path加addEventListener("click", ...)
注意事项和实用技巧
SVG 虽然基于 XML，但 JS 操作时容易踩坑：
- 大小写敏感：属性名是
strokeWidth（JS 驼峰），但实际对应的是stroke-width（XML 小写短横）——用setAttribute("stroke-width", "2")更稳妥 - 坐标系默认左上为原点，
transform="scale(1,-1) translate(0,-height)"可翻转成数学常用坐标系（可选） - 大量图形时，避免频繁
appendChild，可用DocumentFragment批量插入 - 需要动画？优先用
requestAnimationFrame改属性，或配合 CSStransition（对transform和opacity性能更好）
基本上就这些。不复杂但容易忽略命名空间和属性命名规则，动手试几次就顺了。
