给 SVG 加上交互：JavaScript 操作 SVG 的实践记录

每个人都可以，
拥有SSL证书

支持通配符SSL证书、多域名证书、IP证书。适配ACME接口, 支持Zerossl、Let's Encrypt和Google等渠道。登录已有账号

15万+ 免费用户

100万+ 累计证书

8年+ 长期稳定服务

给 SVG 加上交互：JavaScript 操作 SVG 的实践记录

SVG 在项目里基本已经是标配，图标、插画、图表到处都在用。但很多时候光显示还不够，你总得让它对操作有点反应——点某个区域弹个提示、鼠标悬停高亮、或者做一套连贯的动画。用 JS 给 SVG 加交互，思路和折腾普通 DOM 差不多，不过有些小地方还是值得单独记一下。

操作 SVG 常用的手段其实挺固定的。拿到 DOM 节点之后直接改属性、换样式是最基础的，比如替换 fill 的颜色、调整位置。

事件绑定也同理，click、mouseover、mouseout 这些一样往元素上挂。如果只是简单的过渡或者循环动画，CSS 的 transition 和 animation 完全能搞定，hover 效果尤其省事。碰到复杂一点的动画，用 requestAnimationFrame 或者直接上 GSAP 这类库会更顺手，至少时间线控制起来不头疼。还有一个经常被忘记的点是响应式——窗口大小一变，SVG 的 viewBox 和尺寸要是不跟着动，布局很容易垮掉，一般监听一下 resize 动态改一改就行。

下面是一个完整的 demo，画了个带圆角卡片的 SVG，点击后在控制台输出点击位置。代码直接放在一个 HTML 文件里就能跑。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>SVG交互示例</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
    </style>
</head>
<body>
    <svg id="interactiveSvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 200" width="400" height="200">
        <rect width="400" height="200" rx="15" ry="15" fill="#f8f9fa"/>
        <rect x="5" y="5" width="390" height="190" rx="12" ry="12" fill="none" stroke="#e9ecef" stroke-width="2"/>
        <text x="200" y="60" font-family="Arial, sans-serif" font-size="36" font-weight="bold" text-anchor="middle" fill="#343a40">畅享肩颈</text>
        <rect x="100" y="120" width="200" height="50" rx="25" ry="25" fill="#198754"/>
        <text x="200" y="152" font-family="Arial, sans-serif" font-size="28" font-weight="bold" text-anchor="middle" fill="white">345元</text>
    </svg>

    <script>
        const svgElement = document.getElementById('interactiveSvg');

        svgElement.addEventListener('click', function(event) {
            const { offsetX, offsetY } = event;
            console.log(`你点击了SVG的坐标: (${offsetX}, ${offsetY})`);
        });
    </script>
</body>
</html>

SVG 部分画了个浅灰圆角背景，加了层描边，然后放上标题文字和一个绿色圆角价格标签。JS 做的事情很少：拿到 svg 元素，绑一个 click，从事件对象里解构出 offsetX 和 offsetY 打印出来。

这个坐标是相对于 SVG 元素自身左上角的，如果以后需要映射到实际图形坐标系，得再根据 viewBox 换算一下——这个 demo 里 viewBox 和实际宽高一致，所以不会出问题。

基础操作其实就这么几板斧，看起来不复杂，但线上跑起来容易出问题的经常是事件委托没处理好，或者坐标系转换绕晕了。

后面做动态图表、交互式地图的时候，说到底还是这些操作的组合，把点、线、面的更新玩熟就差不多了。

每个人都可以，
拥有SSL证书