ie11中svg图标宽高“设了也不生效”的根本原因是width/height与viewbox共存触发双重缩放bug：ie11先按宽高强制位图拉伸（致模糊），再用viewbox重映射坐标系（致错位），而chrome/firefox可智能协调。
IE11里SVG图标宽高“设了也不生效”，根本不是CSS没写对，而是你同时写了 width/height 和 viewBox，触发了IE11的双重缩放bug——它先按宽高拉伸，再用viewBox重映射，结果越缩越小、越模糊。
为什么IE11里width和viewBox不能共存
IE11渲染SVG时，会把显式声明的 width 和 height 属性当作强制像素尺寸，无视容器CSS；而 viewBox 又会在此基础上做矢量重映射。两者叠加，等于让SVG被缩放两次：一次是位图级拉伸（发虚），一次是坐标系重投影（错位）。Chrome/Firefox能智能协调，IE11做不到。
- 现象：D3生成的图表在IE11中轴线、文字异常小，但容器DOM尺寸正常
- 检查方法：打开开发者工具，看SVG元素上是否同时存在
width="200"和viewBox="0 0 400 300" - 真实影响：即使CSS写了
svg { width: 100%; height: auto; }，IE11仍优先读取内联宽高属性
正确设置viewBox的三个硬性条件
只写 viewBox 不够，必须满足三要素，IE11才肯当它是纯矢量处理：
-
viewBox值必须与SVG源文件内部路径的实际坐标范围完全一致（例如所有<path d="M0,0 L24,24"></path>，就只能写viewBox="0 0 24 24"） - SVG标签上必须彻底删除
width和height属性（连width="100%"这种也得删） - 显式声明
preserveAspectRatio="xMidYMid meet"，避免父容器宽高比异常时裁切或留白
示例（正确）：
<svg viewbox="0 0 24 24" preserveaspectratio="xMidYMid meet"><path d="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2z"></path></svg>
用CSS控制尺寸时必须避开的坑
IE11对SVG的CSS尺寸响应很脆弱，以下写法极易失效：
- 别用
svg { width: 100%; height: 100%; }—— 如果父容器没设高，IE11会算出0 - 别依赖
max-width或min-height控制SVG，它不触发重绘 - 如果SVG是内联在HTML里的，加一句
svg { display: block; }，否则IE11可能不按容器宽度裁剪 - 伪元素或按钮背景用SVG时，禁用
background-size: contain（IE11解析异常），改用固定像素如background-size: 24px 24px
外部SVG文件引用时的兼容要点
用 <img src="icon.svg"> 或 CSS background-image 引入SVG时，IE11无法通过HTML控制 preserveAspectRatio，只能靠源文件本身合规：
- SVG源文件必须自带
viewBox，且无width/height - 上线前必须用
svgo清理：去除冗余<style></style>、注释、默认命名空间，否则IE11加载慢甚至报错 - 绝对不要用
data:image/svg+xml;base64,...内联——IE11对长base64字符串解析不稳定，模糊概率陡增 - 必要时加私有CSS：
image-rendering: -webkit-optimize-contrast;（IE11识别该值，关闭插值模糊）
真正卡住人的从来不是怎么写CSS，而是设计师导出的SVG默认带宽高、viewBox乱填、还嵌了CSS样式——这些不清理，所有前端技巧都白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
