矢量图修改颜色为啥不生效？

最新推荐文章于 2024-08-22 11:54:30 发布
最新推荐文章于 2024-08-22 11:54:30 发布
阅读量264 收藏
点赞数 2
文章标签： html5 css vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wax9092/article/details/138279203
版权
文章讲述了在项目中从Iconfont下载图片并尝试实现颜色继承时遇到的问题，发现去掉fill属性后解决了图片颜色未正确继承父级的问题，这是一个关于前端开发的小技巧。
摘要由CSDN通过智能技术生成

复现

在https://www.iconfont.cn/ 随便找一个下载的图片，直接在项目中引入

想要的效果选中继承父级颜色

发现并没有生效

解决方法：去掉fill属性

成功解决，踩了一个小小坑

wax9092
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue项目改图标_vue项目使用svg图标(并可修改颜色)
weixin_39835158的博客
12-28 2606
先提一下修改颜色原理：svg适量矢量图的线条颜色通过stroke：xxx控制，删除.svg文件的原生stroke属性，便可继承包装组件通过prop传进去的新stroke值1.安装依赖npm install svg-sprite-loader --save-dev2.(这里使用vue-cli 4以上版本) 修改vue.config.js配置文件const path = require('path')...
已解决：vue百度地图自定义标记点不显示以及调整大小
baidu_38730364的博客
04-25 5203
1.自定义图标不显示 最开始百度地图自己的图标，显示没问题，一旦替换自己的图标就不会显示。 网上查了资料，才发现要用require()引入 源代码： onlineIcon: new BMapGL.Icon( "../assets/location-01.png" , new BMapGL.Size(30, 50) ), offlineIcon: new BMapGL.Icon( "../assets/location-02.png", new BMapGL.Size
使用阿里字体图标 iconfont 无法改变颜色问题
YM_010530的博客
01-17 1206
但是最近发现了个问题，就是在设置字体图标的颜色时，它失效了，无论怎么弄，图标就是不变色。这搞得一时之间找不到原因所在！字体图标如今在项目中是普遍使用的一种方案，相比较以前的 雪碧图 方案来说，方便了不少。不管是维护还是使用，都大大降低了心智负担，而且很重要的一点，它可以像字体一样通过 CSS 随意设置颜色～找到原因就好解决问题了，我的解决方案是：把字体图标拆分成两个项目，一个全是彩色的，一个全是纯色的。最终结果就是：如果你的字体项目在【字体格式】那里选择了【彩色】，那么这套字体图标的颜色就不允许修改了！
通过iconfont-阿里巴巴矢量图标库的Symbol引用，修改颜色不起作用的解决方案
最新发布
qq_62025051的博客
08-22 237
通过iconfont-阿里巴巴矢量图标库的Symbol引用，修改颜色不起作用的解决方案
svg图标加上fill=“currentColor“设置颜色时无效解决办法
dekuyu blog
06-13 4864
有些 SVG 图像在定义中已经设置了 fill 属性，这可能会导致手动更改填充颜色无效。要解决这个问题，可以通过以下方法来移除 SVG 自带的 fill 填充属性。下图中的个人中心图标是在iconfont中下载的，可以看出改变fill属性颜色时其不受影响。可以用电脑自带写字板打开svg图标，或者用文本编辑器打开图标，收搜索fill，删除掉改行样式，保存。下面是修改成功后的结果，可以自行修改颜色。
iconfont图标不能修改颜色解决方案
qq_41920758的博客
10-14 4852
这是因为那些本来就有颜色的icon或者自己选择了颜色的icon下载用到项目里之后就无法改变颜色了。有颜色的icon会在svg的path中增加fill属性，所以无法更改颜色。下载js文件后，用编辑器打开，然后用正则表达式查找：fill="#......" ，进行替换。把要下载的icon添加到项目中，然后在我的项目中选择批量操作，接着选择icon，点击批量去色。在做项目的时候我发现下载的icon有的可以修改颜色而有的不能。，然后在vue.config.js中进行配置（代码加在。
解决iconfont图标symbol引用方式，图标不显示及不能变色的问题
fangcaojushi的博客
06-28 2707
解决iconfont图标无法改色 图标改色的关键是改color,还是改fill
prient.zip_图形图像处理_Visual_C++_
08-11
这个项目的核心是实现静态画图功能，允许用户修改图形的边框颜色和矩形或椭圆的填充颜色。 首先，我们需要了解在 Visual C++ 中进行图形绘制的基本方法。这通常涉及到使用 GDI (Graphics Device Interface) 或 GDI+...
如何优化PlantUML流程图（时序图）
qq_45562973的博客
06-12 1939
这篇文章用来介绍，如何画出好看的流程图。本文地址：https://blog.csdn.net/hchengmx/p/16367169.html一个PlantUML时序图的效果图在流程图中，plantUML图最上方是组件，标识该流程图有多少参与方首先，不能用 Participant 一概所有，针对不同的情况应该选择合适的组件。官方提供了以下几种参与者参考：Sequence Diagram syntax and features - PlantUml1Sample 1: note: as关键字用来重命名要是觉得
html矢量动画,一步步教你用HTML5 SVG实现动画效果
weixin_39587246的博客
06-07 618
翻译：疯狂的技术宅本文首发微信公众号：jingchengyideng欢迎关注，每天都给你推送新鲜的前端技术文章摘要SVG是一种基于 XML 的，用于定义缩放矢量图形的标记语言。 它允许你通过在2D平面中确定的一组点来绘制路径、曲线和形状。 此外你还可以通过在这些路径上添加动态属性(例如笔触，颜色，粗细，填充等)来生成动画。从2017年4月起，CSS Level 3 填充和描边模块 开始支持从外部样...
svg 图标颜色无法修改的问题
a432143的博客
06-20 4184
iconfont图标symbol引用方式，有的图标不能通过设置color样式来修改颜色的解决办法 现象：iconfont安装后的图标，是通过symbol引用方式，有的图标不能通过color修改颜色的解决办法，有的又可以。 <svg class="icon" aria-hidden="true" style="color:red;...
fill:currentColor? iconfont为何要设置 vertical-align: -0.15em？
m0_64393334的博客
04-27 628
fill:currentColor? iconfont为何要设置 vertical-align: -0.15em？
使用 iconfont 中的 svg 图标
未思
05-19 1万+
最近在使用 Element-UI开发的时候发现其图标并不是够用，于是想着如何将 https://www.iconfont.cn/home/index 上面的图标导入进自己的项目中去。 网上的搜索结果基本都是传统的引入CSS的方法，并没有使用到SVG的特性，这里介绍使用SVG来引入图标，这中方式普适任意的组件库。 首先我们在iconfont上新键好自己的项目并下载至本地，打开之后其文件如下 我们只...
SVG图片以 https 链接的方式展示在页面上，并且可继承父类的颜色大小（类似阿里巴巴iconfont）
鹤汀凫渚 的博客
04-12 1672
曲线救国
SVG图标颜色文字般继承与填充
hsany330的专栏
05-26 2352
转自：http://www.zhangxinxu.com/wordpress/?p=4286 一、接上篇 前文介绍了SVG Sprites身材和内涵，顺大便客观的评价了SVG Sprites比font-face高几层楼的事实（看看外国同行的对比）。但是呢，人总是这样，总是容不得说自己现在使用东西的不好。于是乎，不经意间戳动了点小小的自尊。导致文章也没细读就大肆反驳：SVG图标颜色要内联设置，不像font-face那样好控制！而且还不只一位兄弟这么说。 心中默念三遍，切勿浮躁，切勿浮躁...
svg图标颜色随父元素变换
qq_43358160的博客
07-11 677
注：为什么有的svg设置了fill: currentColor;用电脑自带的txt或者代码开发工具（如：HbuilderX）打开svg文件。把fill指定颜色去掉 保存就OK了。给svg加上一下样式。
使用图标库，Symbol引入iconfont,修改不了图标颜色
ddd239的博客
09-17 1007
使用阿里图标库，Symbol引入iconfont图标,修改不了图标颜色
字体图标iconfont无法用color控制和设置颜色的解决方案
孤行者程序之路的博客
05-26 4530
使用阿里巴巴图标库无法用color属性改变图标颜色的问题解决方案
阿里iconfont图标不能修改颜色的解决方案
热门推荐
weixin_33994444的博客
04-20 1万+
现象：iconfont安装后的图标，是通过symbol引用方式，有的图标不能通过color修改颜色的解决办法，有的又可以。 <svg class="icon" aria-hidden="true" style="color:red;"> <use xlink:href="#icon-PDF"></use> </svg> 复制代码原因： 当从...
el-popover设置边框颜色为啥不生效
07-20
el-popover 是 Element UI 库中的一个组件，用于展示弹出框。要设置 el-popover 的边框颜色，可以通过 CSS 的方式来实现。以下是可能导致设置边框颜色不生效的几个原因： 1. CSS 优先级问题：请确保你的自定义样式的优先级高于默认样式。可以使用 `!important` 关键字来提高优先级，例如： ```css .el-popover { border-color: red !important; } ``` 2. 样式被覆盖：可能存在其他样式规则覆盖了你设置的边框颜色。你可以使用浏览器的开发者工具检查元素样式，查看是否存在其他样式规则对边框颜色进行了修改。 3. 元素选择器问题：请确保你选择了正确的元素来设置边框颜色。你可以使用 `.el-popover__reference` 类选择器或其他相关类选择器来选择要设置边框颜色的元素。 4. 样式未加载：如果你的样式文件未正确加载，那么设置边框颜色的样式也会无效。请确保样式文件路径正确，并且加载顺序正确。 如果以上方法仍然无法解决问题，请提供更多代码或具体情况的描述，以便我能够更好地帮助你解决问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值