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

Question

如果你缩小视图，IE和Edge计算矩形位置和尺寸很糟糕，看起来线条消失了......

这是一个错误还是我可以以某种方式修改 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>

谢谢

Answer 1

这是一个错误IE.请看这里 - 犬

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

• 不幸的是，如果您添加固定height，width图像将不会具有适应性

• 如果将这些值添加为IE的百分比，则图像将是缩放不正确

  你可以试试尼古拉斯·加拉格尔 http://nicolasgallagher.com/canvas-fix-svg-scaling-in-internet-explorer/的把戏

  并阅读@Paul LeBeau在实践中实施它的帖子

Answer 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>