マージした SVG が Internet Explorer で正しく拡大縮小されないのはなぜですか?それを修正するにはどうすればよいですか?

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

問題

応答性を高めるために複数の SVG を 1 つの SVG に結合すると、IE は結合された SVG をスケーリングできません

IE スケーリング問題

IE では、幅と高さの両方の属性が指定されていないと SVG を適切に拡大縮小できないというバグが発生します。

キャンバス トリック

この問題を修正するには、 を使用するテクニックを利用できます。要素。 IE は を正確に拡大縮小します。要素なので、 を配置します。 SVG と同じアスペクト比を使用すると、SVG が強制的に正しく拡大縮小されます。

<div>

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

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

このトリックにより、SVG がコンテナに比例して拡大縮小され、IE での拡大縮小の問題が解決されます。

代替解決策

キャンバスのトリックは IE のスケーリングの問題に効果的に対処しますが、他にも解決策があります。レスポンシブな SVG 画像を実現するためのアプローチ:

• インライン SVG: 外部ファイルを作成せずに、HTML 内に SVG コードを直接組み込みます。この方法により、マージの必要がなくなり、パフォーマンスが向上します。
• CSS シェイプ: CSS のシェイプアウトサイド プロパティとクリップ パス プロパティを使用して、SVG シェイプを他の要素に適用します。このアプローチは、複雑で応答性の高いシェイプを作成する場合に特に役立ちます。
• SVG メディアタイプ: 解像度が異なる複数の SVG を定義し、CSS メディア クエリを使用してビューポートの幅に基づいて適切な SVG を読み込みます。これにより、デバイス間で最適な表示が保証されます。

以上がマージした SVG が Internet Explorer で正しく拡大縮小されないのはなぜですか?それを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。