SVG 视口在 IE 中未左对齐答案

【问题标题】：SVG viewport not aligned left in IESVG 视口在 IE 中未左对齐
【发布时间】：2018-07-29 11:19:54
【问题描述】：

有带有指定viewBox的简单内联svg：

<div class="wrapper">
  <svg class="svg-inlined"  version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0320 12">
     <g>
        <circle r="6" cx="6" cy="6" fill="gray"></circle>
    </g>
  </svg>
</div>

并且高度受限：

.svg-inlined {
   height: 14px;
   display: block;
}

Chrome 和 Firefox 将其绘制为左对齐

但 IE 将其绘制为居中对齐：

任何想法，如何让 IE 像 Chrome 和 Firefox 一样左对齐图像？

注意：我确实需要自动缩放 svg-image 宽度保持比例，以匹配 sepcified 高度。所以，我不能删除 viewBox 或删除高度，或 sepcify 宽度。

我的用例：我在内容加载时为文本制作占位符。因此，指定与字体大小相关的图像高度，使其适应当前文本大小。这就是为什么我需要指定 viewBox 和高度。

UPD：由于this bug，我无法使用<img> 标签

【问题讨论】：

标签： internet-explorer svg alignment

【解决方案1】：

要调整»view box«到»view port«的对齐/映射，您可以使用<svg>的preserveAspectRatio属性。那里有几个选项，看看here。

我的赌注是：

<svg preserveAspectRatio="xMinYMin meet">…</svg>

【讨论】：