IE9 で SVG 画像が歪むのはなぜですか? ViewBox の役割と一貫したスケーリング。

IE9 での SVG 画像の比率と ViewBox の役割

内で SVG 画像を使用する場合要素では、拡大縮小時に画像の自然な比率が維持されることが期待されます。ただし、IE9 では、この動作は SVG ファイルの構造によって異なる場合があります。

問題:
特定の SVG、特にポリゴンで構成される SVG は、IE9 で比例して拡大縮小できません。 内に含まれる場合max-height CSS プロパティが設定された要素。これにより、画像が引き伸ばされたり、歪んだりします。

理由:
ポリゴンとパスを含む SVG 間のスケーリング動作の違いは、ビュー内の viewBox 属性の有無に起因します。 SVG file.

解決策:
ブラウザ間で一貫したスケーリングを確保するには、SVG ファイル内で常に viewBox 属性を指定することをお勧めします。この属性は、SVG 画像の座標空間を定義します。

例:
次のコードは、この解決策を示しています。

<code class="xml"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 200 200">
<polygon points="..."></polygon>
</svg></code>

viewBox、IE9、およびその他のブラウザは、ポリゴンやパスの存在に関係なく、アスペクト比を維持しながら SVG 画像を一貫して拡大縮小します。

以上がIE9 で SVG 画像が歪むのはなぜですか? ViewBox の役割と一貫したスケーリング。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。