為什麼我的 SVG 在 Internet Explorer 中無法正確縮放？

由於缺少寬度和高度，SVG 無法在IE 中正確縮放

在此問題中，用戶遇到了SVG 在IE 中的縮放問題互聯網瀏覽器。此錯誤源自於 SVG 中缺少明確的寬度和高度屬性。

解決方案：提供寬度和高度屬性

為了解決該問題，用戶使用了尼古拉斯·加拉格爾(Nicolas Gallagher) 發現的技術，其中涉及使用隱藏的“畫布”。元素為 SVG 提供必要的寬高比。

實作：

1. 新增一個 元素加入 HTML，其寬度和高度屬性設定為符合 SVG 的大小。
2. 隱藏 透過將其可見性設為隱藏來使用 CSS。
3. 將 SVG 絕對放置在 <div> 內使用 CSS。

   CSS:

   canvas {
       display: block;
       width: 100%;
       visibility: hidden;
   }
   
   svg {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
   }

   HTML:

   <div>

   HTML:

   HTML:HTML: