重点：设置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>
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改变颜色
=>
但是直接在页面上使用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文件
项目上线就不用担心这个问题了
上面例子只讲解了直接用html的，如果是开发vue、react的小伙伴可以看一下文档里面（上面有发）通过npm/yarn下载依赖的方式
$ yarn add @iconfu/svg-inject
$ npm install @iconfu/svg-inject
编写不易，点个赞再给吧
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）