為什麼 SVG 圖片比例在 Internet Explorer 9 中有所不同？

Internet Explorer 9 中的圖片比例縮放問題

SVG 圖片在 Internet Explorer 9 中經常以意外的比例顯示，即使使用 CSS 指定最大高度也是如此。在比較各種 SVG 檔案的行為時，這種差異變得很明顯。

例如，假設我們有一個SVG 影像，其自然尺寸為200px x 200px，CSS 中定義的最大高度為30px：

<code class="css">img {
    max-height: 30px;
}</code>

在大多數瀏覽器中，此SVG影像按比例縮放至30 像素的高度。但是，在 Internet Explorer 9 中，它可能會顯示為 30x200 像素。

此問題似乎與所使用的 SVG 元素的類型有關。在有問題的 SVG 中，影像由多邊形組成，而在正確縮放的 SVG 中，影像則由路徑組成。

為了確保跨瀏覽器的縮放一致，建議始終指定 viewBox 但不要指定SVG 元素的寬度和高度屬性。透過遵循此做法，您可以提高 SVG 圖像在 Internet Explorer 9 和其他瀏覽器中的相容性。

以上是為什麼 SVG 圖片比例在 Internet Explorer 9 中有所不同？的詳細內容。更多資訊請關注PHP中文網其他相關文章！