SVG可直接用DOM API操作，需用createElementNS指定SVG命名空间，属性用setAttribute设置，动态图形推荐分组和复用节点以提升性能。
直接用 DOM API 操作 SVG 元素和属性
SVG 本质是 XML，浏览器将其解析为标准 DOM 节点，所以不用额外库就能用 document.createElementNS、setAttribute、appendChild 等原生方法操作。关键在于命名空间必须正确——SVG 元素要使用 "http://www.w3.org/2000/svg"，否则元素无法渲染。
-
document.createElement("svg")创建的是 HTML 元素，不生效；必须用document.createElementNS("http://www.w3.org/2000/svg", "svg") - 设置
width/height等属性时，用setAttribute("width", "200")，不是.width = 200（这些不是 JS 属性，是 SVG 属性） - 坐标类属性如
x、y、cx、cy都是字符串，可带单位（如"10px"），但通常直接写数字字符串（"50"）即可
动态创建一个可交互的圆形并响应点击
这是最典型的入门场景：生成 fill、stroke 等样式既可用 setAttribute("fill", "red")，也可用 style.fill = "red"，但前者更符合 SVG 规范，且对 CSS 变量、CSS 类名等兼容更好。
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", "300");
svg.setAttribute("height", "200");
const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circle.setAttribute("cx", "150");
circle.setAttribute("cy", "100");
circle.setAttribute("r", "40");
circle.setAttribute("fill", "#4a90e2");
circle.setAttribute("cursor", "pointer");
circle.addEventListener("click", () => {
circle.setAttribute("fill", "#" + Math.floor(Math.random()*16777215).toString(16));
});
svg.appendChild(circle);
document.body.appendChild(svg);
用 getBBox() 获取真实尺寸和位置
SVG 元素没有 offsetWidth 或 getBoundingClientRect() 那样的稳定表现，尤其在缩放、transform 或 viewBox 缩放后。真正可靠的边界信息来自 getBBox() ——它返回 SVG 坐标系下的精确矩形（x, y, width, height），且只对已插入 DOM 的元素有效。
- 调用前确保元素已
appendChild到 SVG 容器中，否则抛错或返回空对象 -
getBBox()不受 CSStransform影响，但受 SVG 自身transform属性影响 - 若需屏幕像素位置，再配合
svg.getScreenCTM()和矩阵运算，但多数情况getBBox()已够用
避免内联 style 和重复 setAttribute 的性能陷阱
频繁修改 SVG 属性（比如动画帧循环中反复改 cx）会触发重排。比起逐个 setAttribute，更高效的方式是：批量更新用 Object.assign(element, { cx: 120, cy: 80 })（仅对部分可映射属性有效），或统一用 CSS 类 + classList.toggle 控制样式，再把几何属性保留在 JS 变量里做计算。
立即学习“Java免费学习笔记（深入）”；
-
element.style对fill、stroke有效，但对cx、r无效——它们不是 CSS 属性 - 大量动态图形（如百个以上圆点）建议用
- 不要在循环里反复调用
document.createElementNS；复用已有元素或用cloneNode(true)更轻量
getBBox().width 和 clientWidth 数值毫无关系，调试时务必分清坐标系。 
