SVG视口未在IE中左对齐

Question

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

https://jsfiddle.net/updLm0rv/2/

<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宽度保持比例，以匹配分离的高度。因此，我无法删除viewBox或删除高度，或者删除宽度。

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

UPD：由于this bug

，我无法使用<img>代码

Answer 1

要调整»视图框«到»视图端口«的对齐/映射，您可以使用preserveAspectRatio的{​​{1}}属性。那里有几个选项，看看here。

投注是：

<svg>