Chrome下shape-rendering="crispEdges"依赖SVG宽度，轴模糊问题求临时修复

我太懂这种Chrome专属Bug的闹心了——明明设置了shape-rendering="crispEdges"，窗口resize时居然一半概率让坐标轴变模糊，Firefox却全程正常。针对这个问题，我整理了几个经过验证的临时修复方法，你可以挨个试试：

1. 手动对齐像素网格 #

Chrome缩放SVG时，偶尔会把元素定位到非整数像素坐标上，这就是模糊的根源。你可以在窗口resize事件里，强制让坐标轴的位置和尺寸落在整数像素上：

window.addEventListener('resize', () => {
  const svg = document.querySelector('svg');
  const xAxis = document.querySelector('.x-axis');
  const yAxis = document.querySelector('.y-axis');
  
  const svgRect = svg.getBoundingClientRect();
  // 强制坐标轴的位置、尺寸为整数
  xAxis.setAttribute('y', Math.round(svgRect.height - 1));
  xAxis.setAttribute('width', Math.round(svgRect.width - 20));
  
  yAxis.setAttribute('x', Math.round(20));
  yAxis.setAttribute('height', Math.round(svgRect.height - 1));
});

这个方法直接把坐标轴钉在像素边界上，能大幅降低模糊出现的概率。

2. 替换shape-rendering属性 #

有时候crispEdges在Chrome的缩放逻辑里会掉链子，你可以换成vector-effect="non-scaling-stroke"来保证线条锐利：

<line class="x-axis" vector-effect="non-scaling-stroke" stroke="#000" stroke-width="1" />
<line class="y-axis" vector-effect="non-scaling-stroke" stroke="#000" stroke-width="1" />

这个属性会让线条宽度不随SVG缩放而变化，同时强制边缘保持清晰，在Chrome里的表现比crispEdges稳定很多。

3. 用微小transform触发重绘 #

如果上面的方法还没解决，你可以在resize时给SVG加个极小的transform偏移，逼Chrome重新渲染元素：

window.addEventListener('resize', () => {
  const svg = document.querySelector('svg');
  // 加0.001px偏移触发重绘
  svg.style.transform = 'translate(0.001px, 0)';
  // 立即重置，避免布局偏移
  requestAnimationFrame(() => {
    svg.style.transform = '';
  });
});

这个小技巧利用Chrome的渲染机制，让它在resize后重新计算像素定位，从而修复模糊问题。

4. 移除viewBox属性（若适用） #

如果你的SVG用了viewBox，Chrome缩放时的坐标计算可能会出现精度误差。如果场景允许，你可以去掉viewBox，改用固定尺寸的SVG，或者用CSS控制缩放，能减少坐标浮点化的概率。

这些都是针对这个Chrome Bug的临时 workaround，等官方修复后就可以不用啦。

内容的提问来源于stack exchange，提问作者Omiod