CSS中引入sv◎g照片适用动态性转换色调的完成编

2021-03-23 12:26 jianzhan

当我们们加上一张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.6210783,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以部件方式加上3D渲染,是行得通的。

在网络上逛了一圈,发觉大多数数都较为水,许多是根据载入全局性的照片,做为独立部件或是缓存文件来应用,不适感用

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动态性转换色调內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!