当前位置:首页 > 前端技术 > web前端使用CSS修改svg颜色样式

web前端使用CSS修改svg颜色样式

2022年11月07日 11:35:47前端技术39

使用UI切图的svg无法直接修改内部的CSS样式,借用svgo工具可以完成样式的修改

一.准备

1.安装svgo npm包 npm install svgo --save-dev
2.在package.json 脚本命令中加入"svgo": "svgo -f src/common/icons/svg --config=src/common/icons/svgo.yml"
3.在控制台输入npm run svgo 即可进行svg修改,修改后的svg可以使用css样式进行修改

二.原因

美工制作的svg样式存在默认样式,所以无法通过css修改svg样式,而svgo可以破坏内部的svg默认样式,故可以通过css修改svg样式

作者:wo_buzhidao
来源链接:https://blog.csdn.net/wo_buzhidao/article/details/107181795

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/68309.html

标签: css
分享给朋友:

“web前端使用CSS修改svg颜色样式” 的相关文章

用HTML5/CSS3/JS开发Android/IOS应用

用HTML5/CSS3/JS开发Android/IOS应用

现在人人都想成为安卓/IOS应用开发工程师。其实,安卓/IOS应用可以用很多种语言来实现。由于我们前端开发工程师,对HTML5/CSS/JavaScript的网络编程已经相当熟悉了。所以,今天大家将会认识到一些利用前端语言来开发安卓/IOS应用的工具。  在...

优秀工具推荐:超实用的 CSS 库,样板和框架

优秀工具推荐:超实用的 CSS 库,样板和框架

当启动一个新的项目,使用 CSS 框架或样板,可以帮助您节省大量的时间。在这篇文章中,我编译整理了我最喜欢的 CSS 样板,框架和库,帮助你在建立网站或应用程序时更加高效。   当启动一个新的项目,使用 CSS 框架或样板,可以帮助您节省大量的时间。在这篇文...

css实现页面底部固定在屏幕最下方,内容占满屏后紧跟其后的两种方法

1.只针对底部高度固定的情况,不能解决底部高度不固定的情况, 原理:主要内容放在page-main里面,page-container最小高度100%(注意这里html,body高度也要设为100%),position为relative。footer的position为abs...

ZH奶酪:通过CSS自定义HTML中hr样式-颜色-形状

ZH奶酪:通过CSS自定义HTML中hr样式-颜色-形状

修改颜色,线条形状,粗细等... CSS代码: .zh_hr{ border:3px solid rgba(255, 255, 255, 0.50); margin-bottom: 2px; margin-top: 2px }...

html常用标签以及css基本属性和选择器

html常用标签 一般格式为: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5...

修改nui-app中rich-text富文本内容的css样式

如何修改rich-text富文本内容的css样式 以图片举例: 我们可以使用正则匹配的方式为富文本的标签加上类名: 富文本渲染数据.replace(/\<img/gi, '<img class="richImg"'); 然...

CSS样式学习

CSS样式学习 1.css概述 css(cascading style sheet):是一种层叠样式表语言 css的作用是修饰HTML页面,设置html元素的样式,让HTML页面更加好看。 css样式能写在html文件中,css的...

vue项目之CSS样式

vue项目中CSS样式 初始化页面样式 注意: element-UI中提供的组件,组件名称就是类名 .el-header{ } 页面单独的样式,从外部引入css...

CSS中的Position属性

CSS中的Position属性

也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解。 1、简介 position有五个属性: static | relative | absolute | fixed | inheri...

Css图文排布

Css图文排布

图文排布看似简单其实需要花大量的精力去修改,其中图文排布是最常见到的,下面分享下,我对此的一些经验吧 ————————————————– 1.最简单的图文排列——一个图片+一段文字形式 img为行级标签,所以在不进行任何修饰情况下,图片与文字是不整齐的,这时我...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。