svg元素是dom节点，可用javascript获取、绑定事件并修改属性；需用setattribute()操作svg属性，配合css transition实现平滑动画，还可获取点击坐标及区分目标元素。
HTML 中的 SVG 元素本质是 DOM 节点，和普通 HTML 元素一样能绑定事件、读写属性、触发动画——关键在于用 JavaScript 正确获取、监听和修改它。
获取 SVG 元素并绑定点击事件
SVG 支持标准 DOM 事件，比如 click、mouseover、mouseout。只要元素有 ID 或 class，就能用 document.getElementById 或 querySelector 获取：
- 在 HTML 中嵌入 SVG（推荐直接内联）：
<svg width="200" height="200"><circle id="dot" cx="100" cy="100" r="20" fill="steelblue"></circle></svg> - JS 中获取并监听：
const dot = document.getElementById("dot");<br>dot.addEventListener("click", () => {<br> dot.setAttribute("fill", "orange");<br>}); - 注意：SVG 属性如
cx、cy、r、fill等要用setAttribute()修改，不能用style.fill（后者对 fill 不生效）。
动态修改图形状态与样式
点击后不只是换颜色，还能切换形状、移动位置、增删元素：
Java JDK 25
下载
Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。
- 改变半径：
dot.setAttribute("r", 35); - 移动圆心：
dot.setAttribute("cx", 150); dot.setAttribute("cy", 80); - 添加新图形：
const newRect = document.createElementNS("http://www.w3.org/2000/svg", "rect");<br>newRect.setAttribute("x", "50"); newRect.setAttribute("y", "50");<br>newRect.setAttribute("width", "30"); newRect.setAttribute("height", "30");<br>newRect.setAttribute("fill", "#3498db");<br>dot.parentNode.appendChild(newRect);
配合 CSS 实现平滑过渡效果
纯 JS 修改属性会“跳变”，加 CSS transition 可让变化更自然：
- 在 CSS 中声明过渡：
circle { transition: fill 0.3s ease, r 0.2s cubic-bezier(0.4, 0, 0.2, 1); } - 点击时同时改多个属性：
dot.setAttribute("fill", "#e74c3c");<br>dot.setAttribute("r", 28);
浏览器会自动按设定时间平滑过渡。 - 也可用
classList.toggle()切换预设类名，便于复用样式逻辑。
响应式交互与坐标反馈
点击 SVG 内部区域时，常需知道具体坐标或目标元素：
- 获取点击位置（相对于 SVG 左上角）：
svg.addEventListener("click", (e) => {<br> const pt = svg.createSVGPoint();<br> pt.x = e.clientX; pt.y = e.clientY;<br> const cursor = pt.matrixTransform(svg.getScreenCTM().inverse());<br> console.log(`x: ${cursor.x}, y: ${cursor.y}`);<br>}); - 区分不同子元素：
svg.addEventListener("click", (e) => {<br> if (e.target.tagName === "circle") { /* 处理圆 */ }<br> if (e.target.id === "icon-home") { /* 处理图标 */ }<br>});
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
