我之前也踩过IE和Edge下SVG路径渲染的这个坑，特别是前面有非像素单位元素时的亚像素偏移问题。不用修改你那个带REM字体的<div>，这里有几个可行的解决方案：

1. 调整Path坐标对齐像素中心 #

SVG的坐标系统是基于网格线的，如果线条刚好画在网格线上（比如y=0或y=100），浏览器会把线条渲染在两个像素之间，导致模糊。给坐标加上0.5的偏移，让线条落在像素中心，就能解决抗锯齿问题：

<svg xmlns="http://www.w3.org/2000/svg">
  <path d="M 0 0.5 L 300 0.5 L 300 100.5 L 0 100.5 Z" />
</svg>

注意我还加了Z命令闭合路径，让矩形的渲染更完整。

2. 使用shape-rendering: crispEdges强制清晰渲染 #

给SVG元素添加这个CSS属性，告诉浏览器关闭抗锯齿，优先保证边缘清晰：

svg {
  shape-rendering: crispEdges;
}

这个方法简单直接，但要注意：如果你的SVG里还有曲线或需要平滑渲染的元素，这个属性会让它们的边缘也变得生硬，适合只有简单几何形状的场景。

3. 添加viewBox明确SVG视口 #

给SVG设置viewBox属性，定义清晰的坐标范围，帮助浏览器更准确地将SVG内容映射到屏幕像素，避免亚像素偏移：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 100">
  <path d="M 0 0 L 300 0 L 300 100 L 0 100 Z" />
</svg>

4. 用transform触发硬件加速修复渲染bug #

IE/Edge的某些渲染bug可以通过触发硬件加速解决，给SVG添加transform: translateZ(0)：

svg {
  transform: translateZ(0);
}

这个方法不会影响其他元素的渲染，适合作为兜底方案。

问题根源 #

当页面中存在使用REM这类非像素单位的元素时，IE/Edge的布局引擎可能会让SVG的位置产生亚像素偏移。<rect>是浏览器原生优化的形状，会自动做像素对齐；但<path>需要手动处理坐标或通过样式强制清晰渲染，否则就会出现边缘模糊的抗锯齿效果。

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