解决svg设置颜色不生效问题

已于 2023-08-17 08:59:56 修改
阅读量2.2k 收藏 2
点赞数 1
文章标签： 前端 javascript html
于 2023-08-15 10:30:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45838276/article/details/132285818
版权

把svg中的fill属性改为

fill="currentColor"

作用：SVG 元素中设置 fill="currentColor" 时，它会继承元素的颜色，即元素的文本颜色（color 属性）或者元素的父元素颜色。这使得 SVG 图标能够根据其所在的上下文动态地改变颜色，从而适应不同的主题和样式

007。
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
解决Dreamweaver中关于应用CSS的小问题
09-24
在问题中，用户尝试通过CSS来改变超链接（a标签）的颜色和下划线的状态。CSS中的`:link`伪类用于定义未访问过的链接样式，`:visited`伪类定义已访问过的链接样式，`:hover`伪类则定义当鼠标悬停在链接上时的样式。原...
Android-ChinaMap利用xml解析SVG文件绘制中国省份地图
08-13
在Android应用开发中，有时我们需要在屏幕上展示中国地图，并且能够清晰地呈现各个省份的边界。在这种情况下，SVG（Scalable Vector Graphics...对于需要展示复杂图形的应用来说，利用SVG是一种高效、灵活的解决方案。
SVG图片颜色设置无效解决方法-前端
苍老师背后的男人
09-08 1万+
想让svg图片的颜色跟随父元素的color值变化，可先用编辑器打开svg图片文件，修改以下2点后保存即可： 在svg标签中加上 fill="currentColor" 在path标签中去掉 fill="..."，或者改为 fill="currentColor" 拿到的svg图片如果是自带颜色的，一般父元素的颜色设置就会无效，那么就需要修改以上2点。特别是第2点，因为path标签中的d=”..."很长，而 fill="..." 通常放在标签的末尾，容易看漏。 举个例子： //父元素设置red无.
svg修改颜色失败-解决svg 自带 fill 的问题
weixin_47192515的博客
08-28 7930
修改图标颜色失效，发现svg文件会自带一个 fill 属性，导致颜色修改失效。
vue3使用svg 动态修改颜色（记录：修改fill无效）
最新发布
cwdWendy的博客
06-11 622
5.像动态修改颜色直接给svg标签设置css(注意：如果修改fill无效 需要把svg文件内容进行修改，加上fill="currentColor")2.在vite.config.ts中加配置（我的文件放在public下）3.在main.ts中加。
vue3学习——svg使用及封装组件，color不生效问题
m0_49494051的博客
02-03 1029
👆以上少一步，错一步都不会生效。删除svg中的fill属性 <一个一个删好麻烦@_@>复制的svg图标自带fill属性，所以不生效。
SVG 图片颜色设置无效解决方法
welnee的博客
11-30 531
SVG图片颜色设置无效解决方法
SVG不能更改颜色
当然是最帅气的茶茶丸了！哇耶~
10-26 1175
手动把svg文件里所有的fill = '#xxxx'换成 fill=’currentColor‘css样式里写入通过 fill: #009999;
vue svg组件中svg图标颜色无法修改，解决方案！
weixin_49875932的博客
01-10 1798
1.原因是因为svg源文件中fill 设置了颜色，导致无法通过类名去修改。2.解决方案为 将fill设置为fill="currentColor"
svg图标加上fill=“currentColor“设置颜色时无效解决办法
dekuyu blog
06-13 4640
有些 SVG 图像在定义中已经设置了 fill 属性，这可能会导致手动更改填充颜色无效。要解决这个问题，可以通过以下方法来移除 SVG 自带的 fill 填充属性。下图中的个人中心图标是在iconfont中下载的，可以看出改变fill属性颜色时其不受影响。可以用电脑自带写字板打开svg图标，或者用文本编辑器打开图标，收搜索fill，删除掉改行样式，保存。下面是修改成功后的结果，可以自行修改颜色。
mPass 设置所有 H5 页面导航栏默认样式.zip
12-08
3. 使用WKWebView加载H5页面，并确保mPass的样式设置生效。 4. 如有需要，监听WKWebView的生命周期事件，以在特定时刻调整导航栏样式。 5. 测试和调试，确保在不同设备和浏览器上样式表现一致。 总之，"mPass设置...
module2-assignment:这是模块2分配的解决方案
04-14
在“module2-assignment-main”这个压缩包中，很可能包含了实现特定CSS效果或者解决某些设计问题的代码文件。这些文件可能包括： 1. **HTML文件**：HTML文件是结构化的文档，它们定义了页面上的元素和内容。在CSS...
css.zip_site:www.pudn.com
09-23
本资料“css.zip”包含了在www.pudn.com上分享的一个关于CSS样式的文档“css.doc”，它可能是对CSS基础知识的详细讲解和常见问题的解决方案。 CSS的核心概念在于分离内容与表现，让网页设计更加灵活且易于维护。...
自定义 svgIcon 组件无法修改svg文件颜色问题修复
TangAcrab的博客
09-06 1211
解决svg图标无法修改颜色问题
为什么引入SVG文件，给它定义属性不生效原理分析
weixin_43416349的博客
10-18 631
背景： 我使用antd 的Icon组件引入SVG图片，但给svg图片定义styles样式时，不生效，为什么呢？我们平时用antd组件库的 < ArrowRightOutlined style={{color: 'red '}}>时为什么会生效呢，但我图一这样定义就不生效呢？
svg-icon图片修改颜色的两种方法
热门推荐
SYXZSs的博客
10-09 3万+
修改svg图片颜色
svg修改图标颜色
贵林之恋的博客
02-03 2442
svg修改图标颜色
svg-icon图片改颜色
behance的博客
07-31 3156
就可以使用color属性在css代码中，给svg图片改变颜色了。1、改变svg-icon图片代码中的。3、全局加这个样式（不常用）
svg-icon图片不能改颜色
lanyangy的博客
12-29 3829
svg-icon图片不能改颜色 svg-icon 为啥变不了颜色？ 因为 去字体图标库下载的时候选了颜色 ，那svg文件里就自带了fill属性，所以 我们在外面用color改不了svg的颜色。 可以使用下面两种方法改变svg图片的颜色： 1、改变svg-icon图片代码中的fill属性的值（常用） 将fill属性的颜色填充值， fill="#409EFF" 改为 fill="currentColor" 就可以使用color属性在css代码中给svg图片改变颜色了，如下图所示： 2、全局加这个样式（不
给上面的svg设置#6868ae颜色
05-31
要将 SVG 图标的颜色设置为 `#6868ae`，可以使用 CSS 的 `color` 属性。您可以将以下 CSS 代码添加到您的样式表中，以设置所有 `class` 属性为 `iconfont` 的 SVG 元素的颜色： ```css .iconfont { color: #6868ae; } ``` 如果您只想为特定的 SVG 元素设置颜色，可以使用 `querySelector()` 方法和 `style` 属性。例如，如果您想将具有 `class` 属性为 `iconfont` 的第一个 SVG 元素的颜色设置为 `#6868ae`，则可以使用以下代码： ```javascript var svg = document.querySelector('.iconfont'); svg.style.color = '#6868ae'; ``` 请注意，如果您想在多个 SVG 元素之间切换颜色，最好为每个元素设置单独的 `class` 或 `id` 属性，以便更轻松地对其进行选择和操作。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值