react img css修改svg图片样式

svg图片的相关理论
- 定义
- 优点
前端引入svg图片的方式
- 方式一：<svg>标签引入，内嵌到 HTML 中
- 方式二，修改svg的颜色
- 方式三：<img>标签引入
- - 1、元素模糊
  - 2、元素亮度
  - 3、元素投影
  - 4、元素的灰色程度
  - 5、元素对比度
  - 6、元素颜色
  - 7、元素反转颜色
  - 8、元素透明程度
  - 9、元素饱和度
  - 10、元素的褐色
- 实践框架react
- - vue框架
  - react框架
  - - 使用插件步骤
    - 实践
    - 效果

svg图片的相关理论

定义

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

优点

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

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

前端引入svg图片的方式

方式一：标签引入，内嵌到 HTML 中

在写本文时，将 SVG 内嵌到 HTML 中的做法是最常见的，也是比较推荐的方式之一。
标签并没有使用 xmlns=“http://www.w3.org/2000/svg” 声明命名空间，这是因为 HTML 5 文档使用标记，它允许跳过 SVG 命名空间声明，HTML 解析器会自动识别 SVG 元素和它的子元素，除了元素的子元素。

<!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="data:image1.svg" onload="SVGInject(this)" /><img src="data:image2.svg" onload="SVGInject(this)" />
</body>
</html>

Option 2 - Call SVGInject from anywhere

<html>
<body><img src="data:image1.svg" class="injectable" /><img src="data: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);}}

效果

理想 == 实际

05 react img css修改svg图片样式相关推荐

动态修改svg图片颜色
使用场景引入颜色为纯色的svg图片时,动态修改svg图片填充颜色.引入的方式包括直接svg代码引用和img标签间接引用. 直接引用SVG 如果通过svg代码的方式引入图片,那么可以直接修改fill属 ...
vue使用 svg图片以及修改svg图片颜色
一.如何使用svg 1.创建svg专用文件夹,里面只存放svg图片 2. 创建SvgIcon组件 <template><div v-if="isExternal" ...
html svg波浪,CSS实现svg图片水纹波浪流动效果
CSS实现svg图片水纹波浪流动效果里面的其他颜色是自己加的,把下面代码自己改改就可以html> 标题 body { margin:0; background:red; } h1 { fo ...
css修改导航条样式
css修改导航条样式近期由于工作需要要修改table表格导航条样式. 本人特整理出相关代码,以及最后效果,供各位小伙伴参考. 具体代码如下: .xp-table-content ::-webkit- ...
css 修改浏览器滚动条样式（火狐Firefox，谷歌google）
一.修改谷歌google: 修改样式: 1.全局修改,所有滚动条生效: ::-webkit-scrollbar{width:6px;height:6px; background-color: #000 ...
修改svg图片的颜色html,通过CSS改变svg image引入的图片颜色？
在html元素中通过background设置图片icon,然后通过css3的filter滤镜的drop-shadow 设置阴影来呈现这种改变图片颜色的效果.很不错的方法. 但是我现在的元素是在svg中 ...
React中 css修改滚动条样式
第一个 HTML代码: <div class="element">内容 </div> CSS代码: .element{overflow-y: scroll; ...
CSS修改浏览器滚动条样式
可以修改滚动条的以下样式: 1.颜色: 2.宽度: 3.阴影: 3.边框样式. CSS代码如下: <style> body { height: 3000px; } body::-webki ...
css修改滚动条的样式
滚动条的默认样式是这样的: 大灰块做背景,内嵌小灰块做滚动距离的展示. 再加上贴边的宽度,对于内容本身就比较窄的区域来说,这种样式笨重感十足! 单调且无趣! 而像这种样式的滚动条就比较可以了. 滚动条 ...

05 react img css修改svg图片样式

react img css修改svg图片样式

svg图片的相关理论

定义

优点

前端引入svg图片的方式

方式一：标签引入，内嵌到 HTML 中

方式二，修改svg的颜色

方式三：标签引入

1、元素模糊

2、元素亮度

3、元素投影

4、元素的灰色程度

5、元素对比度

6、元素颜色

7、元素反转颜色

8、元素透明程度

9、元素饱和度

10、元素的褐色

实践框架react

vue框架

react框架

使用插件步骤

实践

效果

05 react img css修改svg图片样式相关推荐

最新文章

热门文章

05 react img css修改svg图片样式

react img css修改svg图片样式

svg图片的相关理论

定义

优点

前端引入svg图片的方式

方式一： 标签引入，内嵌到 HTML 中

方式二，修改svg的颜色

方式三：标签引入

1、元素模糊

2、元素亮度

3、元素投影

4、元素的灰色程度

5、元素对比度

6、元素颜色

7、元素反转颜色

8、元素透明程度

9、元素饱和度

10、元素的褐色

实践框架react

vue框架

react框架

使用插件步骤

实践

效果

05 react img css修改svg图片样式相关推荐

最新文章

热门文章

方式一：标签引入，内嵌到 HTML 中