Internet Explorer で SVG が正しく拡大縮小されないのはなぜですか?

IE で SVG が適切にスケーリングしない - 余分なスペースがある

問題: 応答性のために SVG シンボルを使用すると、 Internet Explorer で SVG が適切に拡大縮小されない(IE).

答え: IE には、幅と高さの両方が指定されていない限り、SVG を正しく拡大縮小できないというバグがあります。

解決策:

ニコラスが発見したトリックを使用するギャラガー:

1. <キャンバス> を追加します。 SVG と同じアスペクト比を持つ要素を <div> に追加します。 SVG を含む
2. を作成します。
3. SVG を <div> 内に絶対に配置します。

コード:

<div>

CSS:

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

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

注: このトリックにより、IE は強制的に を使用すると SVG が正しく表示されます。参考として。