IE9 中特定影像的 SVG 比例扭曲
在 img 元素中使用 SVG 時,您可能會遇到意外的縮放問題。在 Internet Explorer 9 中,某些 SVG 可能無法正確縮放,無法保持其原始比例。儘管透過 CSS 指定了 max-height,這種情況仍可能發生。
使用由路徑與多邊形組成的 SVG 時會出現差異。例如,問題中提到的“crocs.svg”圖像無法正確縮放,而“groovy.svg”圖像則可以。
解決方案:確保ViewBox 並省略元素寬度/高度屬性
要解決此問題並確保跨瀏覽器的縮放一致,建議始終在SVG 元素中指定viewBox 屬性。但是,請將寬度和高度屬性留空。
透過這樣做,您可以明確定義 SVG 的尺寸,並允許瀏覽器相應地解釋 CSS max-height 屬性。它確保在各種瀏覽器之間的縮放更加一致。
要進一步了解,請參閱此測試頁面:[測試頁面連結]。本頁提供了 SVG 屬性與 CSS 寬度和高度規格結合的各種範例。透過比較不同瀏覽器中的縮放比例,可以觀察到這些屬性對 SVG 渲染的影響。
以上是為什麼我的 SVG 在 IE9 中縮放不正確,但只有部分縮放?的詳細內容。更多資訊請關注PHP中文網其他相關文章!