Internet Explorer 和 Edge 中的内联 SVG 比例不正确答案

【问题标题】：Bad proportions in inline SVG in Internet Explorer and EdgeInternet Explorer 和 Edge 中的内联 SVG 比例不正确
【发布时间】：2018-06-30 21:10:34
【问题描述】：

如果缩小视图，IE 和 Edge 会错误地计算 rect 位置和尺寸，并且看起来线条会消失...

这是一个错误还是我可以以某种方式修改 SVG 代码？

完整演示：https://codepen.io/illycz/pen/XVoxyx

示例代码：

<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 5060.6 1066.5">
  <rect x="4851.3" y="939.3" class="st107" width="52" height="69.4"/>
</svg>

谢谢

【问题讨论】：

标签： html internet-explorer svg microsoft-edge

【解决方案1】：

这是一个错误IE。请看这里-Caniuse

IE9-11 桌面和移动设备无法正确缩放 SVG 文件。增加高度， width、viewBox 和 CSS 规则似乎是最好的解决方法。

很遗憾，如果添加固定的height,width 图像将不会自适应
如果您将这些值添加为IE 的百分比，则图像将为缩放不正确

你可以试试技巧 Nicolas Gallagher http://nicolasgallagher.com/canvas-fix-svg-scaling-in-internet-explorer/

阅读@Paul LeBeau implemented it in practice的帖子

【讨论】：

@alexandr-t 嗯，我绝对把它放在具有百分比尺寸的容器中，所以它几乎和你提到的例子一样。

【解决方案2】：

<div style="width:80%">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 5060.6 1066.5" style="width:100%;height:100%">
  <rect x="4851.3" y="939.3" class="st107" width="52" height="69.4"/>
</svg>
</div>

【讨论】：