網頁上顯示 svg 圖片,為求與 css 語法的最高相容性,其內有一些屬性是需要避免和參數是需要出現的。這邊筆記下相關內容。
內容
svg 內部不要出現 <mask>, <clipPath> 標籤
這些屬性有其自己的座標系。若你外部元素大小如 <div> 跟其 <svg> 不一樣時,就不會自動縮放而導致顯示位置異常
svg 標籤的 width, height 要刪除
這樣才可讓外部的 css 可以直接對其控制大小
svg 標籤的 viewbox
viewbox 是定義內部的邏輯單位,代表這個區域內有多少方格。這是用作自動等比例縮放的基準
svg 標籤的 fill
若要讓外部 css 可以決定顏色,那 fill 標籤要改為 currentColor
按讚加入粉絲團