解决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
    评论
SVG图片颜色设置无效解决方法-前端
苍老师背后的男人
09-08 1万+
想让svg图片的颜色跟随父元素的color值变化，可先用编辑器打开svg图片文件，修改以下2点后保存即可： 在svg标签中加上 fill="currentColor" 在path标签中去掉 fill="..."，或者改为 fill="currentColor" 拿到的svg图片如果是自带颜色的，一般父元素的颜色设置就会无效，那么就需要修改以上2点。特别是第2点，因为path标签中的d=”..."很长，而 fill="..." 通常放在标签的末尾，容易看漏。 举个例子： //父元素设置red无.
解决Dreamweaver中关于应用CSS的小问题
09-24
在问题中，用户尝试通过CSS来改变超链接（a标签）的颜色和下划线的状态。CSS中的`:link`伪类用于定义未访问过的链接样式，`:visited`伪类定义已访问过的链接样式，`:hover`伪类则定义当鼠标悬停在链接上时的样式。原...
svg修改颜色失败-解决svg 自带 fill 的问题
weixin_47192515的博客
08-28 7879
修改图标颜色失效，发现svg文件会自带一个 fill 属性，导致颜色修改失效。
vue3使用svg 动态修改颜色（记录：修改fill无效）
最新发布
cwdWendy的博客
06-11 555
5.像动态修改颜色直接给svg标签设置css(注意：如果修改fill无效 需要把svg文件内容进行修改，加上fill="currentColor")2.在vite.config.ts中加配置（我的文件放在public下）3.在main.ts中加。
svg图标加上fill=“currentColor“设置颜色时无效解决办法
dekuyu blog
06-13 4599
有些 SVG 图像在定义中已经设置了 fill 属性，这可能会导致手动更改填充颜色无效。要解决这个问题，可以通过以下方法来移除 SVG 自带的 fill 填充属性。下图中的个人中心图标是在iconfont中下载的，可以看出改变fill属性颜色时其不受影响。可以用电脑自带写字板打开svg图标，或者用文本编辑器打开图标，收搜索fill，删除掉改行样式，保存。下面是修改成功后的结果，可以自行修改颜色。
fill:currentColor是什么意思？iconfont为何要设置 vertical-align: -0.15em？
ddx2019的博客
10-16 1万+
在css中，currentColor是一个变量，这个变量的值是当前元素的color值。如果当前元素没有在CSS里显示地指定一个color值，那它的颜色值就遵从CSS规则，从父元素继承而来。 .svg-icon { /*将icon大小设置和字体大小一致 */ width: 1em; height: 1em; vertical-align: -0.15em; /* 因icon大小被设置为和字体大小一致，而span等标签的下边缘会和字体的基线对齐，故需设置一个往下的偏移比例，来纠正视觉上的未对齐效
svg-icon图片修改颜色的两种方法
热门推荐
SYXZSs的博客
10-09 3万+
修改svg图片颜色
vue svg组件中svg图标颜色无法修改，解决方案！
weixin_49875932的博客
01-10 1776
1.原因是因为svg源文件中fill 设置了颜色，导致无法通过类名去修改。2.解决方案为 将fill设置为fill="currentColor"
【css】svg修改图标颜色
花椒和蕊的博客
09-24 1万+
项目中使用了大量的svg图标，一开始只是导入直接使用，直到产品提出要根据条件修改图标的颜色。SVG 意为可缩放矢量图形，SVG 使用 XML 格式定义图像。关于这个fill属性，大概的解释是fill 属性设置形状内的颜色。在style中有个fill对应的颜色就是svg的图标颜色。需要改颜色的话，要在svg图标的内部，把这个类名改成这样。然后再加一个svg类名，path上的类名不用动。导入项目的svg图标大概是这样。可以简单看下教程了解下svg。有个path路径，并且有类名。在页面上通过v-if控制。
Android-ChinaMap利用xml解析SVG文件绘制中国省份地图
08-13
在Android应用开发中，有时我们需要在屏幕上展示中国地图，并且能够清晰地呈现各个省份的边界。在这种情况下，SVG（Scalable Vector Graphics...对于需要展示复杂图形的应用来说，利用SVG是一种高效、灵活的解决方案。
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的核心概念在于分离内容与表现，让网页设计更加灵活且易于维护。...
svg修改图标颜色
贵林之恋的博客
02-03 2434
svg修改图标颜色
SVG不能更改颜色
当然是最帅气的茶茶丸了！哇耶~
10-26 1168
手动把svg文件里所有的fill = '#xxxx'换成 fill=’currentColor‘css样式里写入通过 fill: #009999;
HTML SVG通过currentcolor设置主题色
C_C666的博客
03-07 361
currentcolor = 上级元素的color属性。
svg-icon图片改颜色
behance的博客
07-31 3128
就可以使用color属性在css代码中，给svg图片改变颜色了。1、改变svg-icon图片代码中的。3、全局加这个样式（不常用）
自定义 svgIcon 组件无法修改svg文件颜色问题修复
TangAcrab的博客
09-06 1200
解决svg图标无法修改颜色问题
给上面的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、付费专栏及课程。

余额充值