Internet Explorer及Edge中内嵌SVG比例异常问题

这个问题我之前也踩过坑！首先明确：这确实是IE和旧版Edge（基于EdgeHTML内核）的浏览器Bug——当SVG使用viewBox进行缩放时，这两款浏览器对rect元素的浮点坐标和尺寸计算存在精度缺陷，尤其是当坐标数值很大（比如你示例里的x=4851.3、y=939.3）时，缩小视图后，浏览器会错误地把rect的位置或尺寸计算到可视区域外，导致线条看起来“消失”了。

不过幸运的是，我们可以通过修改SVG代码来绕过这个Bug，这里给你几个实用的解决方案：

方案1：将浮点数值转换为整数 #

浮点数值是触发精度问题的关键，把rect的坐标和尺寸改成整数后，浏览器的计算误差会大幅降低。比如把你的示例代码调整为：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5060.6 1066.5">
  <rect x="4851" y="939" class="st107" width="52" height="69"/>
</svg>

如果需要保留精确的视觉效果，可以先整体缩放SVG的viewBox，把所有数值按比例缩小到整数范围后，再调整rect的参数。

方案2：用<path>替代<rect> #

<path>元素的坐标计算逻辑在IE/Edge里更稳定，我们可以把rect转换成等价的路径指令。你示例里的rect对应的路径是从起始点向右、向下、向左、向上画边再闭合，修改后的代码如下：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5060.6 1066.5">
  <path d="M4851.3 939.3 h52 v69.4 h-52 v-69.4 z" class="st107"/>
</svg>

这种方式既能保留原有的精确浮点数值，又能避开rect的计算Bug。

方案3：给尺寸添加微小冗余 #

给rect的宽度和高度增加一个极小的数值（比如0.1），这样就算浏览器计算时有精度损失，rect也不会完全消失在可视区域外。比如修改为：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5060.6 1066.5">
  <rect x="4851.3" y="939.3" class="st107" width="52.1" height="69.5"/>
</svg>

总结一下：这个问题的根源是浏览器的计算精度Bug，但通过上述几种SVG代码调整方式，都能有效解决这个问题，不需要依赖浏览器修复。

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