建设设计网站公司网站,网站建设宽带,seo2短视频发布,自动注册wordpress账号软件一、背景与问题
1. 背景
在前端的项目开发过程中#xff0c;我们经常使用到 字体图标库#xff08;iconfont#xff09;#xff0c;以 ant dezign 为例。
如果在遇到图标库不存在的图标时#xff0c;我们往往采用自定义图标的方式#xff1a;
引入自定义的svg图…一、背景与问题
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 srcxxx /标签但这种方式也会面临上述问题。❌
3. 使用 element.innerHtml 请求到的svg string但此方法有XSS攻击安全隐患。❌
4. 使用background-color mask-image。✅
mask-image: CSS属性用于设置元素上遮罩层的图像。
使用方式 当我们为有颜色的背景图上加上遮罩层图像即可展示出类似的效果曲线救国用在这里再为合适不过了。 其实mask-image还有许多用处 CSS遮罩CSS3 mask/masks详细介绍大家感兴趣可以去康康
三、写在最后
这个问题当时探索了好久才找到一个可实用的解决方案记下来为大家塌塌坑。如果你有更好的解决方式欢迎评论 开发中总能遇到各种奇奇怪怪的问题欢迎大家共享出自己遇到的奇葩问题我们一起探讨。
