在响应式布局中嵌入 SVG

最近遇到一个需要使用 SVG 并兼容 IE11 的场景，发现在 Chrome 下表现正常的代码在 IE 中却无法缩放，四处搜索一番最终发现了这个利用 position 和 padding 的解决方案。虽然需要根据每个SVG调整 padding 的数值，但好处是纯 CSS 实现，并且在 img 或 object 标签引用或直接内嵌 svg 代码的情况下都能使用，恰好符合我的需要。

.svg-conatainer {
   display: inline-block;
   position: relative;
   width: 100%;
   padding-bottom: 100%; /*需要根据 SVG 的比例调整*/
   vertical-align: middle; /* 也可以根据需要改成 top 或 bottom */
}

svg {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* 只有在使用 img 标签引用的时候才需要 */
}

然后需要在 svg 标签中删除 width 和 height，加入 preserveAspectRatio 并确保有 viewBox 属性：

svg id="IE" preserveAspectRatio="xMinYMin meet" viewBox="0 0 222.64 218.79">

最终效果如下：