05 react img css修改svg图片样式

影子信息

已于 2023-08-10 16:27:28 修改

阅读量1.4k

点赞数

分类专栏： css 文章标签： javascript react.js css

于 2023-02-13 09:49:48 首次发布

本文链接：https://blog.csdn.net/weixin_45024453/article/details/128974616

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

svg图片的相关理论

定义

SVG 意为可缩放矢量图形，SVG 使用 XML 格式定义图像。
导入项目的svg图标大概是这样
有个path路径，并且有类名，在style中有个fill对应的颜色就是svg的图标颜色
这个fill属性，大概的解释是fill 属性设置形状内的颜色

优点

SVG可被非常多的工具读取和修改(比如vscode)
不失真, 放大缩小图像都很清晰
SVG文件是纯粹的XML, 也是一种DOM结构
使用方便, 设计软件可以直接导出

1、页面放大会导致图片放大会变的模糊
2、如果页面中的图片过多的话会造成有很多请求也就代表页面加载慢。
所以基于以上问题我们一般使用svg的矢量图，矢量图一般由设计师提供给前端来转换成字体图标，在项目中使用。
优点：1、放大不会模糊 2、只加载一次不会有多余的请求。

前端引入svg图片的方式

方式一：

在写本文时，将 SVG 内嵌到 HTML 中的做法是最常见的，也是比较推荐的方式之一。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <!-- 内嵌到 HTML 中 -->
        <svg width="100%" height="100%" version="1.1">
            <circle cx="50" cy="50" r="50" fill="hotpink">
            </circle>
        </svg> 
    </div>
</body>
</html>

方式二，修改svg的颜色

实现思路：
1、我们可以借助iconfont-阿里巴巴矢量图库，把设计好的svg文件通过上传图标至项目。
2、点击下面红框里面的地址，查看源码，然后复制到自己项目中的css文件中。
3、全局引用然后直接在class=""中使用。

方式三：标签引入

css3的滤镜filter属性，可以对网页中的图片进行类似Photoshop图片处理的效果，例如背景的模糊效果、老照片（黑白照片）效果等

1、元素模糊

filter:blur(像素值)
像素值越高，元素越模糊

2、元素亮度

filter:brightness(百分比);
100%是正常亮度，百分比越小，元素亮度越暗；百分比越大，元素亮度越明显，而且百分比可以超过100%。

3、元素投影

filter:drop-shadow(投影在X轴偏移,投影在Y轴偏移,投影的模糊程度,投影的颜色);
X轴为正数时往右偏移，负数往左偏移；Y轴正数往下偏移，负数往上偏移；投影模糊程度是像素值；投影颜色可以是十六进制的。

4、元素的灰色程度

filter:grayscale(百分比);
百分比为100%时，元素是灰色；百分比越大，灰度程度越明显。

5、元素对比度

filter:contrast(百分比);
百分比越高，对比度越明显；100%时是正常对比度；如果值是0%时，元素只有浅灰色。

6、元素颜色

filter:hue-rotate(度数);
根据色相环的度数对应相应的颜色。

7、元素反转颜色

filter:invert(百分比);
百分比越大，反转效果越明显；为0%时，元素不变。

8、元素透明程度

filter:opacity(百分比);
百分比为100%时，元素无变化；而百分比越小，元素越透明。

9、元素饱和度

filter:saturate(百分比);
百分比越大，饱和度越明显；100%时，元素无变化。

10、元素的褐色

filter:sepia(百分比);
百分比最大100%；百分比越大，元素呈现褐色效果越明显；为0%时，元素没变化。

链接: css filter阴影的10个参数
链接: css filter阴影的11个参数

总结：

filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);
 
/* Apply multiple filters */
filter: contrast(175%) brightness(3%);
 
/* Global values */
filter: inherit;
filter: initial;
filter: unset;

drop-shadow是添加一个可以修改颜色的阴影

  <div class="svg">
       <img src="./firefox-logo.svg" class="svg-color">
   </div>

//css
.svg {
  width: 30px;
  height: 30px;
  overflow: hidden;
}
.svg-color {
  transform: translateX(30px);
  filter: drop-shadow(#ff0000 -30px 0px 0px);
}

实践框架react

vue框架

链接: vue项目引入svg格式图片且可以通过设置color改变图片颜色

react框架

npm
If you are using npm

$ npm install @iconfu/svg-inject
Yarn
If you are using Yarn

$ yarn add @iconfu/svg-inject

使用插件步骤

链接: 参考html vue react引入插件的gitHub
Add οnlοad=“SVGInject(this)” to any element where you want the SVG to be injected.

For most use cases this approach is recommended and provides nice advantages.

<html>
<head>
  <script src="svg-inject.min.js"></script>
</head>
<body>
  <img src="image1.svg" onload="SVGInject(this)" />
  <img src="image2.svg" onload="SVGInject(this)" />
</body>
</html>

Option 2 - Call SVGInject from anywhere

<html>
<body>
  <img src="image1.svg" class="injectable" />
  <img src="image2.svg" class="injectable" />

  <script src="svg-inject.min.js"></script>
  <script>
    SVGInject(document.querySelectorAll("img.injectable"));
  </script>
</body>
</html>

实践

布局

 <div className={styles.imgEle}>
  {/* <img src={icon} alt="icon" className={styles.imgColor} onLoad={SVGInject} /> */}
   <img src={icon} alt="icon" className={styles.imgColor} />
 </div>

样式

 .content {
    display: flex;
    align-items: center;
    padding-left: 10px;
    &:hover {
      transform: scale(1.1, 1.1);
      .imgEle {
        .imgColor {
          // fill: pink;
          // filter: grayscale(100%);
          filter: invert(5%)
          // filter: drop-shadow(#ff0000 -30px 0px 0px);
        }}
    }
  }
  .imgEle {
    .imgColor {
      filter: brightness(0);
    }
  }

效果

理想 == 实际

影子信息

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
05 react img css修改svg图片样式

SVG 意为可缩放矢量图形，SVG 使用 XML 格式定义图像。导入项目的svg图标大概是这样有个path路径，并且有类名，在style中有个fill对应的颜色就是svg的图标颜色这个fill属性，大概的解释是fill 属性设置形状内的颜色。
复制链接

扫一扫