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

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中正確縮放探索者。