您现在的位置是:网站首页> 编程资料编程资料

CSS中引用svg图片支持动态切换颜色的实现代码基于Css Variable的主题切换完美解决方案(推荐)详解如何简单实现CSS主题的切换纯css实现选中切换效果的示例使用CSS实现黑暗模式和高亮模式的切换功能纯CSS免费让网站拥有暗黑模式切换功能的实现代码

2021-09-03 1003人已围观

简介 这篇文章主要介绍了CSS中引用svg图片支持动态切换颜色的实现代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

当我们添加一张svg图片显示时,react提示找不到文件。

我们可以在全局文件global.d.ts内,添加图片类型的声明:

详见《TypeScript 引用资源文件后提示找不到的错误处理方案

声明之后,引用不报错了。然后我们看看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动态切换颜色内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!

相关内容

-六神源码网