一、背景与问题

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）相关推荐

css3获取当前时间并显示,实时获取当前时间并展示在页面上
简介实时获取当前时间并展示在页面上,是很多地方常用的:在页面中做此展示以便查看时间.本文使用js通过一个小的demo实现效果. 完整Code 实时展示当前时间 #time { width: 60%; ...
前端使用正则表达式从接口地址栏取值并将对应的值展示在页面上
业务场景,APP分享出链接,通过get请求接口方式,展示对应的字段. 需求图: 获取某单号 var name="";//姓名var idNo="";//证件号v ...
django自定义模板标签，通过键获取字典的值，屏蔽姓名等隐蔽信息并调用展示到页面上
1.在web开发中,经常会说要屏蔽某些字眼,用*来屏蔽客户比较隐蔽的信息,如身份证,姓名,手机号等等,当然,如果安全性做得好一点的会加密身份证后存入数据库,如果没有的话,直接取出来,页面要展示的时候, ...
前端JS读取文件内容并展示到页面上
核心法宝:FileReader {this.returnDomFun(<><UploadFiletitle={'AAAA'}fileName={fileName}onChangeIn ...
界面上展示svg图片_使用SVG创建SciFi用户界面元素
界面上展示svg图片 For some reason, clipped corners on UI elements is visual shorthand for "the future& ...
Python爬虫之煎蛋网妹子图爬虫，解密图片链接加密方式
之前在鱼C论坛的时候,看到很多人都在用Python写爬虫爬煎蛋网的妹子图,当时我也写过,爬了很多的妹子图片.后来煎蛋网把妹子图的网页改进了,对图片的地址进行了加密,所以论坛里面的人经常有人问怎么请求的 ...
阿里iconfont上传svg图片空白、或展示不全的解决方案/搜索到的icon无法改变颜色解决方案
问题1:阿里iconfont上传svg图片空白.或展示不全原因造成这个问题的原因,可能是因为sketch.dx等软件在导出svg时,自动在svg上添加了一些iconfont平台无法解析的属性造成的 ...
网页引入svg图片的4种方式
web应用开发使用svg图片,总结了下,可以有如下4种方式: 1. 直接插入页面. 2. img标签引入. 3. css引入. 4. object标签引入. 1. 直接插入页面在html页面,可以直 ...
java访问https链接下载图片
java访问https链接下载图片一.通过maven引入https工具包 <dependency><groupId>org.apache.httpcomponents< ...

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

一、背景与问题

1. 背景

2. 问题

二、解决方案（svg链接如何嵌入HTML，呈现出来）

1. 菜鸟教程提供了三种方案：（❌）

2. 直接使用<img src=`xxx` />标签，但这种方式也会面临上述问题。（❌）

3. 使用 element.innerHtml = 请求到的svg string，但此方法有XSS攻击安全隐患。（❌）

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

三、写在最后

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

最新文章

热门文章

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

一、背景与问题

1. 背景

2. 问题

二、解决方案（svg链接如何嵌入HTML，呈现出来）

1. 菜鸟教程提供了三种方案：（❌）

2. 直接使用<img src=xxx />标签，但这种方式也会面临上述问题。（❌）

3. 使用 element.innerHtml = 请求到的svg string，但此方法有XSS攻击安全隐患。（❌）

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

三、写在最后

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

最新文章

热门文章

2. 直接使用<img src=`xxx` />标签，但这种方式也会面临上述问题。（❌）