这篇文章将为大家详细讲解有关CSS中如何引用svg图片支持动态切换颜色，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
成都创新互联公司成立与2013年，是专业互联网技术服务公司，拥有项目成都网站设计、
成都做网站网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元点军做网站,已为上家服务,为点军各地企业和个人服务,联系电话:18982081108
当我们添加一张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图片支持动态切换颜色”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
分享文章：CSS中如何引用svg图片支持动态切换颜色-创新互联
URL标题：
http://cdkjz.cn/article/hcppe.html
