SVG图片以 https 链接的方式展示在页面上，并且可继承父类的颜色大小（类似阿里巴巴iconfont）

一、背景与问题

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详细介绍，大家感兴趣可以去康康

三、写在最后

这个问题当时探索了好久才找到一个可实用的解决方案，记下来为大家塌塌坑。如果你有更好的解决方式，欢迎评论！
开发中总能遇到各种奇奇怪怪的问题，欢迎大家共享出自己遇到的奇葩问题，我们一起探讨。