[筆記] 讓 SVG 得以自適應寬高縮訪放的方法

章節連結

SVG 若要讓其可以自由隨著螢幕尺寸或是外框大小縮放的話,那會需要修改一下 svg 本身的設定,才能讓其套用。
css3 logo


內容

1. 將 <svg> 標籤上的 width 和 height 移除,保留 viewBox
2. 在 <svg> 的外層標上一個 <div>,然後根據所需來調整 <div> 的寬高
這樣一來,你的 <svg> 圖案就會自動根據 <div> 的寬高來進行縮放


參考資料

1. Why don’t SVG images scale using the CSS “width” property?

按讚加入粉絲團

延伸閱讀