CSS中引用svg图片支持动态切换颜色的实现代码

编辑: admin 分类: css 发布时间: 2021-11-25 来源:互联网

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

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

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

声明之后，引用不报错了。然后我们看看svg图片，里面有颜色及其它设置：

<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>窗口_返回</title>
    <g id="控件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="窗口_返回">
            <rect id="Rectangle-6" fill="#D8D8D8" opacity="0" x="0" y="0" width="24" height="24"></rect>
            <path d="M8.35417135,12.9957726 C8.13320936,12.7345458 8,12.3967967 8,12.0279541 C8,11.6586058 8.13357489,11.3204363 8.3550807,11.0590615 L8.3521103,11.0564202 L14.356041,4.51971371 L14.3599873,4.52318728 C14.635253,4.20288524 15.0434555,4 15.4990737,4 C16.3280124,4 17,4.67157288 17,5.5 C17,5.8870199 16.8533375,6.23980607 16.6125263,6.50587693 L16.62107【文章出处:美国cn2站群服务器 欢迎转载】83,6.51340439 L11.5390798,12.0228281 L16.5124905,17.3935277 C16.8121157,17.6677653 17,18.0619548 17,18.5 C17,19.3284271 16.3280124,20 15.4990737,20 C15.0262153,20 14.6044287,19.7814702 14.3293154,19.439953 L8.35278214,12.9970098 L8.35417135,12.9957726 L8.35417135,12.9957726 Z" id="Oval-43-Copy-3" fill="#808080"></path>
        </g>
    </g>
</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';
<SVG className="backIcon" src={BackPng} />

设置动态样式：

&:hover {
    path {
      fill: #4ecb78;
    }
    .backContent {
      color: #4ecb78;
    }
  }
  &:active {
    path {
      fill: #2baf57;
    }
    .backContent {
      color: #2baf57;
    }
  }

到此这篇关于CSS中引用svg图片支持动态切换颜色的实现代码的文章就介绍到这了,更多相关css svg动态切换颜色内容请搜索海外IDC网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持海外IDC网！

【文章出处http://www.1234xp.com/yz.html 欢迎转载】
更多阅读