CSS 修改svg的颜色

于 2024-08-26 08:00:00 发布
阅读量270 收藏
点赞数 3
分类专栏： CSS 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_48968874/article/details/141155691
版权

前言：在项目中使用svg，部分svg的颜色与页面背景色很贴近，导致svg几乎看不到，因此需要解决

效果

添加以下两个CSS属性即可

在svg标签上设置样式，需要什么颜色就设置成什么颜色

这里是以设为白色为例子

color: #fff;
fill: #fff

注：color和fill的颜色要一致，且都要必须设置才可生效

 欢迎扫描下方二维码关注VX公众号

Web - Nancy
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【奇技淫巧】用CSS修改嵌入的svg icon图标图片的颜色
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
07-12 1966
iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具https://www.iconfont.cn/search/index?searchType=icon&q=csdn&page=1&fromCollection=-1&fills=&tag=点上面的链接进去下载这个csdn.svg 效果如图：.........
css修改svg图形背景色_使用CSS样式化可缩放矢量图形（SVG）
cune1359的博客
07-03 4461
今天，我们将继续有关可伸缩矢量图形（SVG）的讨论，正如我们在前一篇文章中指出的那样，使用SVG的优点之一是可以使用CSS对其进行样式设置。 SVG样式属性 SVG的样式基本上与常规HTML元素的工作方式相同，实际上它们也共享一些公共属性。 但是，还有其他一些专门用于SVG对象的属性，除了CSS之外，它们还有自己的规范。 例如 ，在常规HTML元素中，我们可以使用backgroun...
svg-icon图片修改颜色的三种方法
askuld的博客
07-25 6110
1：选中svg图片，使用记事本或者编辑器打开。
利用css修改svg图标颜色
qq_33256701的博客
01-10 4253
1、将svg 标签的第一个fill改为 fill="currentColor"2、将 path 里的 fill 属性 删除。这样svg图标颜色就会自动继承父元素的了。
实现svg图标直接用css样式更改颜色
最新发布
m0_58495067的博客
07-10 338
主题色分深色或者浅色时，有时候 icon 需要自己设计添加进来，这时候如果配合不同主题色，如果不能通过 css 样式 color 属性动态修改颜色，就得切图两个图标，然后写切换逻辑很麻烦。所以可以通过修改 svg 编码让其根据 color 属性动态修改颜色。
【css】svg修改图标颜色
热门推荐
花椒和蕊的博客
09-24 1万+
项目中使用了大量的svg图标，一开始只是导入直接使用，直到产品提出要根据条件修改图标的颜色。SVG 意为可缩放矢量图形，SVG 使用 XML 格式定义图像。关于这个fill属性，大概的解释是fill 属性设置形状内的颜色。在style中有个fill对应的颜色就是svg的图标颜色。需要改颜色的话，要在svg图标的内部，把这个类名改成这样。然后再加一个svg类名，path上的类名不用动。导入项目的svg图标大概是这样。可以简单看下教程了解下svg。有个path路径，并且有类名。在页面上通过v-if控制。
【CSS】SVG图片属性及修改颜色
kakaai77的博客
04-13 3143
最近的开发中遇到了SVG不能修改颜色的问题，以前是直接用，没有研究过，现在搞个笔记记录下。
SVG 图标颜色调整
sinat_33255495的博客
01-04 4354
SVG使用CSS的fill属性来填充元素的颜色。通过定义CSS规则，可以轻松地修改SVG图形的颜色。使用fill属性可以修改SVG形状的填充颜色，使用stroke属性可以修改SVG形状的描边颜色。SVG使用stroke属性来定义和修改图形元素的描边颜色。
CSS 更改 SVG 颜色
宏斌的博客
06-16 1799
修改。path元素的fill属性即可 jsx <IconBox> <ShrinkIcon /> </IconBox> styled-component const IconBox = styled.div` svg > path { fill: #fff !important; } &:hover { svg > path { fill: #51f !important; } } `;
通过css 改变通过img标签引入的svg颜色
zhaotian2017的博客
02-14 2391
前言 修改svg颜色，一般直接修改文件的svg的fill属性就可以了，可以直接改svg属性，也可以通过css修改，但是前端一般都是通过img标签直接引入的svg图片，这样不管是从后期维护还是代码整洁度考虑，都更佳优秀，但问题也随之而来，没法通过css改变svg的颜色。 下面来介绍一种通过css改变通过img标签引入的svg颜色的方法 使用SVGInject插件来解决 svg-inject是一个缓存解决方案将SVG文件内联注入到DOM的库。 下载及安装 一、通过js标签直接引入 下载 开发版 (.
CSS3 SVG网页加载图标动画特效
06-24
2. **模块化**：CSS3被划分为多个独立的模块，如布局（Flexbox, Grid）、颜色、字体、过渡（Transitions）、动画（Animations）等，便于开发者按需使用。 3. **过渡和动画**：`transition`属性可以平滑地改变一个或...
CSS3 SVG文字背景动画.zip
07-05
开发者可以通过查看和修改这些文件，学习并自定义自己的CSS3 SVG文字背景动画。 总的来说，CSS3 SVG文字背景动画是一种将网页设计推向新的艺术高度的技术，它结合了CSS3的强大样式和动画能力，以及SVG的矢量图形...
CSS3 SVG卡通QQ表情特效特效代码
03-20
通过修改SVG元素的属性，如路径的控制点、填充颜色等，可以实现表情的动态变化。 **SVG与CSS3结合** 将SVG与CSS3关键帧动画结合，可以创建出丰富的交互式动画效果。例如，可以定义一个SVG的path元素表示笑脸的嘴巴...
css hover改变svg颜色
OldStreet61的博客
08-26 2626
转自https://blog.csdn.net/qq_39785489/article/details/107781746 想要实现菜单前的icon（svg格式），根据hover改变svg颜色，并且默认选中项也是高亮。最终实现思路，参考如上连接的方法。 <div class="of-h cursor-pointer"> <div class="btn step-init-position"></div> </div> cs
svg修改图标颜色
qq_43985303的博客
07-10 931
修改这个fill="currentColor"stroke：边框，即线条，设置其颜色。
修改svg图片颜色
m0_56772756的博客
07-09 984
修改svg图片烟色
设置SVG图片的颜色-color:#f50
前端，请指教
06-26 420
【代码】设置SVG图片的颜色-color:#f50。
通过css样式自定义svg图标颜色
lazy_tomato的博客
05-06 2599
首先以文本的形式打开我们的svg图标。可以用记事本或者vscode都可以。使用浏览器打开会直接看到svg的效果。
CSS动态修改SVG图标颜色
05-25
可以使用CSS的`fill`属性来修改SVG图标的颜色。具体步骤如下： 1. 在HTML中将SVG图标插入到页面中： ```html <svg class="icon" viewBox="0 0 512 512"> <path d="M256 0C114.844 0 0 114.844 0 256s114.844 256 256 256 256-114.844 256-256S397.156 0 256 0zm0 480c-119.297 0-224-94.703-224-224S136.703 32 256 32s224 94.703 224 224-94.703 224-224 224z"></path> </svg> ``` 2. 添加CSS样式，使用`fill`属性修改图标颜色： ```css .icon { fill: #000; /* 默认黑色 */ } .icon:hover { fill: #ff0000; /* 鼠标悬停时红色 */ } ``` 注意：有些SVG图标可能没有填充（fill）属性，只有描边（stroke）属性，此时可以使用`stroke`属性来修改描边颜色。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值