IE11下SVG默认宽度为100%，如何重构代码？求替代兼容方案

嘿，我之前也跟IE11这个烦人的SVG宽度问题死磕过，除了你提到的给SVG加width: 1em的办法，还有几个实用的替代方案，给你整理一下：

• 设置固定像素宽高
  因为你的SVGviewBox是0 0 10 32，刚好对应图标本身的原始尺寸，直接给SVG设置匹配的宽高就能让IE11乖乖听话，不会强制拉满宽度：

  .handle--icon {
    width: 10px;
    height: 32px;
  }
  

  这个方法适合图标尺寸固定的场景，viewBox会帮你保持正确的比例，不会出现拉伸变形。

• 通过父容器约束宽度
  给SVG的父元素.handle--draggable设置display: inline-block，让父容器根据SVG的固有尺寸自动收缩，从而限制SVG不会撑满整个容器：

  .handle--draggable {
    display: inline-block;
  }
  .handle--icon {
    height: 1em; /* 用em控制高度，保持响应式 */
    /* 无需额外设置width，父容器会自动适配 */
  }
  

  这个方案适合需要响应式调整图标的场景，不用硬写固定数值。

• 利用SVG的preserveAspectRatio属性
  在SVG标签里添加preserveAspectRatio="xMinYMin meet"，这个属性能控制SVG如何适配容器空间，xMinYMin meet会让SVG保持原始比例，以左上角对齐容器，不会被强制拉伸填满：

  <svg class="handle--icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 32" preserveAspectRatio="xMinYMin meet">
    <circle cx="2" cy="2" r="2" />
    <circle cx="8" cy="2" r="2" />
    <!-- 其他SVG元素 -->
  </svg>
  

  建议配合父容器的尺寸限制一起使用，比如给父容器加个max-width，效果会更稳定。

• 将SVG作为背景图使用
  把SVG转成base64编码（或者直接引用外部SVG文件），然后用CSS背景图的方式渲染，彻底绕开IE11对SVG元素的尺寸bug：

  .handle--icon {
    display: inline-block;
    width: 1em;
    height: 3.2em; /* 对应10:32的宽高比例 */
    background-image: url('data:image/svg+xml;base64,这里替换成你的SVG转码');
    background-size: contain;
    background-repeat: no-repeat;
  }
  

  然后把HTML里的SVG元素换成空的<span class="handle--icon"></span>就行，这个方法能让所有浏览器的表现完全一致，适合需要统一兼容性的场景。

不同方案可以根据你的实际需求选：固定尺寸图标用固定宽高；响应式需求用父容器约束；大量图标统一管理的话，背景图或者图标库会更高效。

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