使用svg并改变其颜色

Handada_fan

已于 2022-05-12 10:07:56 修改

阅读量2.2w

点赞数 9

分类专栏： svg 文章标签： html css

于 2022-05-12 10:05:48 首次发布

本文链接：https://blog.csdn.net/qq_39441438/article/details/124724220

版权

svg 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

svg直接作用在页面上

重点：设置svg的fill属性

<html>
	<head>
	  <style>
	    body {
	      background-color: #e2e2e2;
	    }
	
	    .svg-img {
	      width: 100px;
	      height: 100px;
	    }
	
    svg path:hover {
	      fill: skyblue;
	    }
      /* hover上面和下面的写法都行 */
    /* svg:hover {
      fill: skyblue;
    } */
	  </style>
	</head>
	
	<body>
	  <?xml version="1.0" standalone="no"?>
	  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg
	    t="1652235329412" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1498"
	    xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
	    <defs>
	      <style type="text/css">
	        @font-face {
	          font-family: feedback-iconfont;
	          src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype");
	        }
	      </style>
	    </defs>
	    <path
	      d="M85.333333 85.333333m53.333334 0l746.666666 0q53.333333 0 53.333334 53.333334l0 746.666666q0 53.333333-53.333334 53.333334l-746.666666 0q-53.333333 0-53.333334-53.333334l0-746.666666q0-53.333333 53.333334-53.333334Z"
	      p-id="1499"></path>
	  </svg>
	
	</body>

</html>

效果：示例上的sbg图片本身是黑色，hover改变颜色
![未hover前](https://img-blog.csdnimg.cn/9d83ca90f5ad4ec39372320caf5bd8e8.png
=> hover状态

但是直接在页面上使用svg太长，且不好维护。误删了一部分代码都不知道删了svg的那部分。所以下面的例子会用img标签来承载svg

img标签承载svg

需要配合第三方svg-inject一起使用

网上一大堆说使用这个插件时，需要删除每个svg里面的fill属性，但我这边尝试的时候，不管删不删都能起效。fill属性本身作用就是svg的初始化颜色。

<html>

	<head>
	  <script src="./svg-Inject.js"></script>
	  <style>
	    body {
	      background-color: #e2e2e2;
	    }
	
	    .svg-img {
	      width: 100px;
	      height: 100px;
	    }
	
	    .svg-img path:hover {
	      fill: skyblue;
	    }
	  </style>
	</head>
	
	<body>
	  <img class="svg-img" src="./24gf-square.svg" onload="SVGInject(this)" />
	  <img class="svg-img" src="./da-up icon.svg" onload="SVGInject(this)" />
	
	</body>

</html>

图片上的οnlοad="SVGInject(this)"是svg-Inject要求传的，只需要复制粘贴上去就行，不用在script里面定义自己的方法。

注意注意

使用了svg-Inject.js，务必用本地服务器的方式打开页面，否则会报跨域问题
这种：
在这里插入图片描述
或者这种：

不要采用文件直接在浏览器打开的方式：

正常vue、react开发时是通过创建本地服务器的方式进行开发的，所以可以忽略这一点，如果只是想自己尝试一下，随便在本地创建了一个js、一个html、一个svg文件，可以借助vscode插件里面的
Live Server插件：
在这里插入图片描述
然后通过右键html，选择open with Five Server打开html文件

项目上线就不用担心这个问题了

vue/react开发

上面例子只讲解了直接用html的，如果是开发vue、react的小伙伴可以看一下文档里面（上面有发）通过npm/yarn下载依赖的方式

$ yarn add @iconfu/svg-inject

$ npm install @iconfu/svg-inject

编写不易，点个赞再给吧在这里插入图片描述

Handada_fan

关注

9
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
使用svg并改变其颜色

svg直接作用在页面上重点：设置svg的path属性<html> <head> <style> body { background-color: #e2e2e2; } .svg-img { width: 100px; height: 100px; } svg path:hover { fill: skyblue; } /* ho
复制链接

扫一扫