一、背景與問題

1. 背景

在前端的項目開發過程中，我們經常使用到 字體圖標庫（iconfont），以 ant dezign 為例。

如果在遇到圖標庫不存在的圖標時，我們往往采用自定義圖標的方式：

• 引入自定義的svg圖，作為component
  
• 但是并不是任何類型的svg都可繼承父類的顏色與字體大小，需要設置svg的屬性：width=“1em” height=“1em” fill=“currentColor”
  

2. 問題

• 當我們有此類需求時：導航的圖標可配置，并且可以進行全棧換膚。
  

• 實現方式：

  為了實現全棧換膚，我們需要采用svg的形式來展示圖標，
  但是圖標是我們上傳到阿里云上后，把http鏈接 拿到后臺配置出來的，于是
  
  這個方式將失效。

二、解決方案（svg鏈接如何嵌入HTML，呈現出來）

1. 菜鳥教程提供了三種方案：（?）

這種方式雖然可以展示出svg圖片，卻無法選中html元素 更改樣式，達到換膚的效果。因為embed、object、iframe都是樣式隔離的。

2. 直接使用<img src=xxx />標簽，但這種方式也會面臨上述問題。（?）

3. 使用 element.innerHtml = 請求到的svg string，但此方法有XSS攻擊安全隱患。（?）

4. 使用background-color + mask-image。（?）

mask-image: CSS屬性用于設置元素上遮罩層的圖像。

使用方式：

當我們為有顏色的背景圖上加上遮罩層圖像，即可展示出類似的效果，曲線救國用在這里再為合適不過了。
其實mask-image還有許多用處： CSS遮罩CSS3 mask/masks詳細介紹，大家感興趣可以去康康

三、寫在最后

這個問題當時探索了好久才找到一個可實用的解決方案，記下來為大家塌塌坑。如果你有更好的解決方式，歡迎評論！
開發中總能遇到各種奇奇怪怪的問題，歡迎大家共享出自己遇到的奇葩問題，我們一起探討。

總結

以上是生活随笔為你收集整理的SVG图片以 https 链接的方式展示在页面上，并且可继承父类的颜色大小（类似阿里巴巴iconfont）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。