svg - 我好像发现了个chrome bug ？

Question

我好像发现了个chrome bug

https://code.juejin.cn/pen/7564339560436465699

当svg缩放很大时，对于circle元素，浏览器的事件触发就会有问题，demo 中的hover是完全不生效的，即使用js添加事件侦听也是一样的。

但是缩小svg画布后，就正常了，例如在demo中将viewbox属性改为-90 -43 176 194后，hover能够正确触发。

所以是浏览器的问题，还是我的问题？

感觉是vector-effect导致的。

我试了下Safari，是完全正常的。

Answer 1

根据你的描述和Demo分析，问题主要源于 SVG 的高缩放比例导致的事件命中测试（Hit Testing）精度问题，并非 Chrome 的 bug，而是 SVG 坐标转换机制的特性。以下是关键点：

---

�� 问题原因

1. 超大 viewBox 导致元素尺寸极小
   你设置的 viewBox (-1700 -800 3400 1600) 范围非常大，但 SVG 容器尺寸较小（约 480x400px）。这导致：

   • 计算精度问题：Circle 的实际屏幕尺寸 ≈ (7.5 半径 × 2) × (480px / 3400 viewBox宽度) = 约 2.1px
   • 浏览器在计算鼠标坐标对应的 SVG 坐标时，因浮点精度限制无法精准命中微小元素。
2. vector-effect 不是主因
   vector-effect: non-scaling-stroke 只影响描边渲染（阻止描边随缩放变粗），与事件触发无关。

---

✅ 解决方案

1. 调整 viewBox 到合理范围（推荐）
   如 Demo 中缩小 viewBox 后正常（-90 -43 176 194），这本质是让 用户坐标 与 屏幕像素 比例接近 1:1：

   <svg viewBox="-90 -43 176 194">...</svg>

2. 通过 CSS 强制扩大命中区域
   给 Circle 添加透明描边扩大交互范围：

   circle {
     stroke: transparent;
     stroke-width: 10; /* 按需调整，增加命中面积 */
   }

3. 业务层修复
   如果必须保持大 viewBox：

   // 在 SVG 上代理事件，手动计算命中
   svg.addEventListener('mousemove', e => {
     const pt = svg.createSVGPoint();
     pt.x = e.clientX, pt.y = e.clientY;
     const { x, y } = pt.matrixTransform(svg.getScreenCTM().inverse());
     
     // 手动检查坐标是否在 Circle 内
     const circle = document.querySelector('circle');
     const dx = x - circle.cx.baseVal.value;
     const dy = y - circle.cy.baseVal.value;
     const hit = (dx*dx + dy*dy <= circle.r.baseVal.value**2);
     
     if (hit) circle.classList.add('hover');
   });

---

�� 根本机制

• 事件命中测试依赖 SVG 坐标 → 屏幕坐标的转换矩阵。
• 当转换矩阵的缩放比例极大时（如 Demo 中约 0.0004倍），毫秒级的坐标误差也会导致事件丢失。
• 所有浏览器（Chrome/Firefox/Safari）都存在此限制，本质是计算机浮点数精度问题。

建议优先采用调整 viewBox 的方案，这是最符合 SVG 设计理念的做法。