响应式SVG在IE浏览器中显示失真问题求助

嘿，我碰到过不少开发者在IE里踩SVG响应式的坑，你这个失真问题大概率是IE对SVG的缩放规则和现代浏览器不一致导致的。给你几个针对性的解决方案，亲测有效：

• 给SVG补全viewBox属性并设置弹性宽高
  IE对没有viewBox的SVG缩放支持极差，这是最常见的诱因。你需要确保viewBox的数值和SVG的原始画布尺寸完全匹配，比如你的SVG原始是800×600，就加上viewBox="0 0 800 600"；同时把SVG的width设为100%、height设为auto，让IE能正确计算缩放比例。

• 别用CSS transform缩放SVG
  IE对CSS的transform: scale()处理SVG时很容易出现模糊失真，尤其是非整数缩放比例的情况。做响应式尽量依赖SVG自身的viewBox+百分比宽高来实现，别靠CSS缩放。

• 显式声明preserveAspectRatio属性（可选但有用）
  如果需要保持SVG的宽高比不被拉伸，显式加上preserveAspectRatio="xMidYMid meet"（这是默认值，但IE有时候需要明确声明才生效），它会让SVG在容器内按比例适配，不会变形。示例代码：

  <svg viewBox="0 0 800 600" preserveAspectRatio="xMidYMid meet" width="100%" height="auto">
    <!-- 你的SVG图形内容 -->
  </svg>
  

• 检查SVG内部元素的单位
  如果SVG里的图形元素用了固定像素单位，缩放时也可能出现局部失真。尽量改用相对单位（比如em、%）或者直接用无单位数值（SVG默认单位是px，会跟着viewBox的缩放比例同步调整）。

• 确保SVG容器没有固定宽高限制
  有时候父容器的固定宽高、overflow: hidden等设置会导致SVG在IE里被裁剪或拉伸，把容器的宽高设为100%，overflow设为visible试试。

如果以上方法都没解决，还可以试试给IE单独加个兼容样式，用条件注释针对性处理：

<!--[if IE]>
  <style>
    svg {
      width: 100vw;
      height: auto;
      max-width: 100%;
    }
  </style>
<![endif]-->

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