svg修改不了颜色解决办法

最新推荐文章于 2024-06-11 16:34:11 发布
最新推荐文章于 2024-06-11 16:34:11 发布
阅读量1w 收藏 6
点赞数 9
分类专栏： css 文章标签： css svg
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dyw3390199/article/details/114395590
版权

今天自定义一个svg组件时候发现无论如何都无法通过css修改svg的颜色：
在这里插入图片描述
后来发现是因为svg文件里面的fill=xxx这段代码的原因
在这里插入图片描述

解决方法：

找到对应的svg文件，把这段代码删掉：
在这里插入图片描述
保存，就可以修改颜色了：
在这里插入图片描述

Akimoto Hiroshi
关注
  • 9
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
svg字体不能更改颜色
Jasonsanghb的博客
01-25 1978
svg字体不能更改颜色 在阿里图标等字体图标库中下载svg字体，发现不能更改颜色，这是因为本身每一个svg文件中有一个path元素，里面有fill属性，fill属性规定了字体的颜色，所以在外部父元素设置color是无法改变其颜色。有三种方法可以改变svg字体。 如果要改为黑色 方法1： 直接修改svg path元素中 fill属性为#000。但是这样的缺点就是只要用到这个字体图标都是黑色。 方法二： fill="#fff" 改为 fill="currentColor" 就可以在父元素中设置color为#
SVG不能更改颜色
当然是最帅气的茶茶丸了！哇耶~
10-26 1177
手动把svg文件里所有的fill = '#xxxx'换成 fill=’currentColor‘css样式里写入通过 fill: #009999;
vue3使用svg 动态修改颜色（记录：修改fill无效）
最新发布
cwdWendy的博客
06-11 634
5.像动态修改颜色直接给svg标签设置css(注意：如果修改fill无效 需要把svg文件内容进行修改，加上fill="currentColor")2.在vite.config.ts中加配置（我的文件放在public下）3.在main.ts中加。
vue svg组件中svg图标颜色无法修改，解决方案！
weixin_49875932的博客
01-10 1804
1.原因是因为svg源文件中fill 设置了颜色，导致无法通过类名去修改。2.解决方案为 将fill设置为fill="currentColor"
background-image使用svg如何改变颜色
weixin_34332905的博客
10-10 2479
结论 在我多番测试之后，才发现background-image使用svg，改变颜色根本做不了。 分析 当svg图片被使用成background-image，颜色的设置需要在svg内部才能生效。在外部CSS设置颜色样式，却是无效，这其实可以从CSS选择器得到解释，CSS选择器必须选择到DOM元素，而svg却被做成背景图，并没有以元素引入，所以在外部也就设不了颜色。 例子 CSS： i { ...
解决svg设置颜色不生效问题
qq_45838276的博客
08-15 2279
属性）或者元素的父元素颜色。这使得 SVG 图标能够根据其所在的上下文动态地改变颜色，从而适应不同的主题和样式。时，它会继承元素的颜色，即元素的文本颜色（把svg中的fill属性改为。作用：SVG 元素中设置。
SVG图片颜色设置无效解决方法-前端
苍老师背后的男人
09-08 1万+
想让svg图片的颜色跟随父元素的color值变化，可先用编辑器打开svg图片文件，修改以下2点后保存即可： 在svg标签中加上 fill="currentColor" 在path标签中去掉 fill="..."，或者改为 fill="currentColor" 拿到的svg图片如果是自带颜色的，一般父元素的颜色设置就会无效，那么就需要修改以上2点。特别是第2点，因为path标签中的d=”..."很长，而 fill="..." 通常放在标签的末尾，容易看漏。 举个例子： //父元素设置red无.
更改svg链接的颜色
04-06
为了解决这个问题，我们可以使用`<object>`标签的`style`属性传递内联CSS到SVG，或者使用JavaScript来修改SVG元素的样式。 另外，`object`标签有一个`contentDocument`属性，可以让我们在JavaScript中访问到加载的...
html修改svg的颜色，使用到的js脚本
04-12
在给定的场景中，我们有两个JavaScript文件：`svg-inject.js` 和 `svg-inject.min.js`，它们可能是用来处理SVG注入和颜色修改的库。 `svg-inject.js` 是开发版本，可能包含了易于理解和调试的源代码，而 `svg-...
vue-svg-icon：vue2.0中多色svg图标的解决方案（vue2.0的可变彩色svg图标方案）
02-04
vue2图标方案中多色svg图标的解决 v1.2.9 演示： : 特征： 不再需要在main.js中注入SVG 支持SVG的路径，圆，椭圆，矩形，线，折线，多边形标签 支持SVG中的分组标签 在Illustrator或素描中进行实时svg编辑 通过...
CSS中引用svg图片支持动态切换颜色的实现代码
11-20
然后我们看看svg图片，里面有颜色及其它设置： <?xml version="1.0" encoding="UTF-8"?> <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns=...
HTML5 SVG可变颜色动画标签栏(vue修改svg颜色)-HTML5代码JS特效代码
04-28
HTML5 SVG可变颜色动画标签栏是一款好看的动画标签栏，菜单对应不同的颜色，点击每个图标时就会自动...HTML5 SVG可变颜色动画标签栏特征：适合动画标签,标签栏,SVG,HTML5, HTML5代码,前端开人员下载简单修改便可使用。
怎么修改svg的颜色? img引入svg图片怎么修改颜色的三种方法
热门推荐
weixin_42127307的博客
07-18 3万+
修改svg的颜色的三种方法
svg修改图标颜色
qq_43985303的博客
07-10 883
修改这个fill="currentColor"stroke：边框，即线条，设置其颜色。
html修改svg颜色
Lyran的博客
05-23 2万+
先删除svg文件中的fill值，然后就可以通过样式修改颜色了。 ps：必须是符合iconfont标准正常显示的svg。
svg-icon图片修改颜色的三种方法
askuld的博客
07-25 5308
1：选中svg图片，使用记事本或者编辑器打开。
svg矢量图设置颜色详解
qq_44741577的博客
02-24 1577
svg这种是可以通过color去设置的颜色的。
svg图标修改颜色
菜鸟的博客
07-07 2万+
在svg标签中定义一个class类，在class中添加fill:currentColor,然后添加color：red,就可以修改svg图标的颜色了 例子： .svg{ fill:currentColor; color:red; }
Nuxtjs 项目使用 svg-sprite-loader 更改 svg 的颜色
老司机的后备箱
10-24 1415
由于一些原因，最新的公司项目要使用的技术切换到了Nuxt.js，也就是Vue的 ssr 服务端渲染框架。使用会让你的svg引入写起来非常的舒服，可以随意修改其颜色，就是配置起来稍稍麻烦一点。但对比开发体验来说，这点时间花费，是完全值得的！为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。
如何修改svg图片的颜色
05-17
你可以使用CSS的filter属性来修改SVG图片的颜色。具体步骤如下： 1. 在SVG文件中，找到你需要修改颜色的元素的ID或class。 2. 在CSS文件中，使用filter属性来给该元素添加一个hue-rotate滤镜，如下所示： ``` #your-svg-element { filter: hue-rotate(180deg); } ``` 这将把该元素的颜色旋转180度，使它变成相反的颜色。你可以根据需要调整hue-rotate的角度。 3. 保存并刷新页面，你应该能够看到SVG元素的颜色已经改变了。 注意：这种方法只适用于那些单色或者单调的SVG图像。对于复杂的图像，可能需要使用其他方法来修改颜色。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值