鼠标移入修改svg图的颜色
参考文章1：https://zongzi531.com/2020/12/16/img%E6%A0%87%E7%AD%BE%E4%BD%BF%E7%94%A8svg%E5%90%8E%E5%A6%82%E4%BD%95%E6%94%B9%E5%8F%98%E9%A2%9C%E8%89%B2/
参考文章2：https://www.cnblogs.com/slongs/p/11377817.html
试了很多方法，例如滤镜，阴影加位移，效果不理想，最终用的文章2的方法。注入的方式直接修改颜色。
下载链接：https://download.csdn.net/download/kuilaurence/87681155
使用方法：
我们可以看实际效果是svg文件最终相当于直接导入到了html中，所以操作的时候就特别方便了，比如改个颜色；
使用时 只要将要控制的svg图片所在的img便签上加上 οnlοad=“SVGInject(this)”
<!DOCTYPE html>
<html><head><title>SVG交互示例</title><style>svg:hover rect,svg:hover path {stroke: red;}h1::before {content: "!";}h1::after {content: "→";}ol li::marker {content: counter(list-item) ". ";counter-increment: list-item;}</style>
</head><body><h1>SVG交互示例</h1><img src="./icon.svg" alt="SVG图像" onload="SVGInject(this)" width="200" height="200" /><ol><li>第一项</li><li>第二项</li><li>第三项</li></ol>
</body>
<script src="./svg-inject.js"></script></html>
伪类的学习：
CSS中的伪类是用来选择元素的某种状态或位置，以便为其应用样式。以下是一些常用的CSS伪类：
:hover - 当鼠标悬停在元素上时应用样式。
:active - 当用户点击元素并保持鼠标或手指按下状态时应用样式。
:focus - 当元素获得焦点时应用样式，例如在用户使用Tab键或鼠标单击元素时。
:visited - 选择已访问的链接。
:link - 选择未访问的链接。
:first-child - 选择父元素的第一个子元素。
:last-child - 选择父元素的最后一个子元素。
:nth-child(n) - 选择父元素的第n个子元素。
:nth-last-child(n) - 选择父元素的倒数第n个子元素。
除了上述伪类之外，还有其他伪类可以用于更具体的选择器，例如::before和::after伪元素选择器，可以用来在元素前后插入内容。还有::placeholder伪类选择器，可以用来选择表单元素的占位符文本。
:nth-of-type(n) - 选择父元素中某种类型的第n个子元素。例如，:nth-of-type(2)可以选择父元素中第二个p元素。
:nth-last-of-type(n) - 选择父元素中某种类型的倒数第n个子元素。
:first-of-type - 选择父元素中某种类型的第一个子元素。
:last-of-type - 选择父元素中某种类型的最后一个子元素。
:only-child - 选择父元素中唯一的子元素。
:only-of-type - 选择父元素中唯一的某种类型的子元素。
:not(selector) - 选择所有不匹配给定选择器的元素。
:checked - 选择已选中的单选框或复选框。
:disabled - 选择被禁用的表单元素。
:enabled - 选择可用的表单元素。
:empty - 选择没有子元素的元素。
:target - 选择当前活动的锚点目标元素。
这些CSS伪类可以用于更精确的元素选择器，让开发者更方便地为元素应用样式，实现更丰富的交互效果。
::before和::after是CSS中的伪元素选择器，它们允许开发者在元素前面或后面插入内容，并可以为这些内容定义样式。这些伪元素可以实现很多有趣的效果，例如在文本前后添加装饰性符号、为链接添加图标等等。
使用::before和::after伪元素需要在CSS中使用content属性，该属性定义了要插入的内容。例如，下面的样式将在所有h1元素前面插入一个叹号：
h1::before {
content: “!”;
}
content属性可以接受多种类型的值，例如文本字符串、属性值、计数器等等。下面是一些例子：
/* 在所有链接后面添加箭头图标 */
a::after {
content: “→”;
}
/* 使用属性值插入图像 */
div::before {
content: url(“path/to/image.png”);
}
/* 使用计数器插入数字 */
ol li::before {
content: counter(list-item) ". ";
counter-increment: list-item;
}
需要注意的是，伪元素选择器是用::（两个冒号）表示的，而非伪类选择器使用的单个冒号。在某些较旧的浏览器中，可能会使用单个冒号表示伪元素选择器。但是，为了更好的兼容性，最好使用双冒号表示法。
此外，::before和::after伪元素默认是行内元素，可以使用CSS的display属性将其转换为块级元素或其他类型的元素。例如，下面的样式将在所有段落前面插入一个图像，该图像被声明为块级元素：
p::before {
content: url(“path/to/image.png”);
display: block;
}
总之，::before和::after伪元素选择器是非常有用的，可以为元素添加额外的内容和样式，实现更丰富的页面效果。