Internet Explorer で SVG が適切にスケーリングしないのはなぜですか?それを修正するにはどうすればよいですか?

IE で SVG が適切にスケーリングしない

なぜこれが起こっているのですか?

IE には既知のバグがあり、次の両方の場合に SVG が適切にスケーリングされません。幅と高さが明示的に指定されていません。

修正方法

IE でこの問題を解決するには、Nicolas Gallagher が発見したトリックを使用できます。この手法では、 を利用します。要素。IE は正しくスケーリングします。 を配置することで、

<div> 内の SVG と同じアスペクト比を持つSVG を含む場合、SVG は強制的に正しいサイズでレンダリングされます。

実装

<div>

を使用した更新されたコードは次のとおりです。トリック:

canvas {
    display: block;
    width: 100%;
    visibility: hidden;
}

svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

カスタム スタイル

要素を正しく配置するには、次の CSS を追加します:これらの調整により、SVG はインターネットで正しく拡大縮小されます。エクスプローラー。