17370845950

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() 不受 CSS transform 影响，但受 SVG 自身 transform 属性影响
• 若需屏幕像素位置，再配合 svg.getScreenCTM() 和矩阵运算，但多数情况 getBBox() 已够用

避免内联 style 和重复 setAttribute 的性能陷阱

频繁修改 SVG 属性（比如动画帧循环中反复改 cx）会触发重排。比起逐个 setAttribute，更高效的方式是：批量更新用 Object.assign(element, { cx: 120, cy: 80 })（仅对部分可映射属性有效），或统一用 CSS 类 + classList.toggle 控制样式，再把几何属性保留在 JS 变量里做计算。

• element.style 对 fill、stroke 有效，但对 cx、r 无效——它们不是 CSS 属性
• 大量动态图形（如百个以上圆点）建议用 分组 + transform 平移整个组，比单独移动每个元素快得多
• 不要在循环里反复调用 document.createElementNS；复用已有元素或用 cloneNode(true) 更轻量

SVG 的“矢量性”不靠 JS 实现，而是靠 DOM 节点本身保持分辨率无关；JS 只负责驱动这些节点。最容易被忽略的一点是：所有坐标和长度默认单位是用户单位（user unit），不是像素——这意味着缩放、viewBox、CSS width/height 的组合会让 getBBox().width 和 clientWidth 数值毫无关系，调试时务必分清坐标系。