首頁 > web前端 > css教學 > 為什麼我的 SVG 在 Internet Explorer 中無法正確縮放,如何修復它?

為什麼我的 SVG 在 Internet Explorer 中無法正確縮放,如何修復它?

Patricia Arquette
發布: 2024-12-10 01:11:10
原創
705 人瀏覽過

Why Aren't My SVGs Scaling Properly in Internet Explorer, and How Can I Fix It?

SVG 在 IE 中無法正確縮放

為什麼會發生這種情況?

IE 有一個已知錯誤,如果兩者都無法正確縮放 SVG寬度和高度未明確指定。

如何修復它?

為了解決 IE 中的這個問題,可以採用 Nicolas Gallagher 發現的一個技巧。該技術利用了。元素,IE 可以正確縮放。透過放置一個與 <div> 中的 SVG 具有相同的縱橫比包含 SVG,它強制 SVG 以正確的尺寸渲染。

實作

這裡是帶有 的更新程式碼訣竅:

<div>
登入後複製

自訂樣式

要正確定位元素,請加入以下CSS:

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

svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
登入後複製

透過這些調整,SVG 應在Internet中正確縮放探索者。

以上是為什麼我的 SVG 在 Internet Explorer 中無法正確縮放,如何修復它?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門推薦
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板