SVG元素需用createElementNS创建并指定命名空间，属性用setAttributeNS设置，禁用innerHTML更新，事件绑定遵循DOM标准，注意跨浏览器兼容性。
SVG元素在JavaScript中可以像普通HTML元素一样操作，但需注意命名空间、属性设置方式和事件绑定的特殊性。核心在于用document.createElementNS创建元素，用setAttributeNS设置带命名空间的属性（如xlink:href），并优先使用DOM方法而非innerHTML更新内容。
动态创建与插入SVG元素
SVG属于XML文档，必须指定SVG命名空间"http://www.w3.org/2000/svg"，否则浏览器无法识别为有效图形元素。
- 创建
<circle>：const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle"); - 设置坐标和样式：
circle.setAttribute("cx", "50");circle.setAttribute("cy", "50");circle.setAttribute("r", "20");circle.setAttribute("fill", "steelblue"); - 插入到已有
<svg>容器中：svgElement.appendChild(circle);
安全更新SVG内容与结构
避免对SVG元素使用innerHTML，尤其当内容含<use>、<defs>或引用资源时，会导致命名空间丢失或引用失效。
Javascript Sdk
下载
用于 inference.sh 的 JavaScript/TypeScript SDK，可运行 AI 应用、构建代理、集成 150+ 模型。包名：@inferencesh/sdk（npm install），完整 TypeScript 支持。
- 替换子元素：先清空再逐个
appendChild新节点 - 修改文本内容：用
textContent而非innerHTML更新<text>元素 - 更新
<use>引用：改用setAttributeNS(null, "href", "#icon")（现代浏览器支持）或setAttribute("xlink:href", "#icon")（兼容旧版）
绑定交互事件与响应式行为
SVG元素支持标准DOM事件（click、mouseover等），但需注意<g>、<path>等默认不可聚焦，且事件冒泡路径与HTML略有差异。
立即学习“Java免费学习笔记（深入）”；
- 给
<rect>添加点击高亮：rect.addEventListener("click", () => { rect.setAttribute("fill", "orange"); }); - 实现拖拽移动：监听
mousedown→记录初始偏移，mousemove→更新transform="translate(x,y)"，mouseup→清理 - 响应缩放/视口变化：监听
resize或SVG容器getBoundingClientRect()，重算相对坐标
处理跨浏览器兼容细节
部分API在IE或旧版Safari中行为不一致，需做轻量适配。
-
getBBox()在未渲染SVG中可能返回空，确保元素已挂载且display非none -
<image>加载失败时，监听onerror并降级显示占位符 - 动画控制：优先用
requestAnimationFrame驱动transform或属性插值，避免依赖<animate>标签（兼容性差）
