这篇文章将为大家详细讲解有关CSS中如何引用svg图片支持动态切换颜色,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
成都创新互联-专业网站定制、快速模板网站建设、高性价比松山网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式松山网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖松山地区。费用合理售后完善,十多年实体公司更值得信赖。
当我们添加一张svg图片显示时,react提示找不到文件。
我们可以在全局文件global.d.ts内,添加图片类型的声明:
声明之后,引用不报错了。然后我们看看svg图片,里面有颜色及其它设置:
是否可以根据一张svg,显示不同的效果?比如hover后高亮
理论上添加xml代码解析,然后将svg以组件形式添加渲染,是可行的。
在网上逛了一圈,发现大多数都比较水,很多是通过加载全局的图片,作为单独组件或者缓存来使用,不适用
react-inlinesvg
发现了一个比较不错的开源,超级不错,安利!
https://github.com/gilbarbara/react-inlinesvg
安装:npm i react-inlinesvg
或者 yarn addreact-inlinesvg
添加引用:import SVG from 'react-inlinesvg';
添加图片:
import BackPng from '../../../../assets/images/back.svg';
设置动态样式:
&:hover { path { fill: #4ecb78; } .backContent { color: #4ecb78; } } &:active { path { fill: #2baf57; } .backContent { color: #2baf57; } }
关于“CSS中如何引用svg图片支持动态切换颜色”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。