admin
CSS 改变 SVG 图片颜色的方法主要涉及对 SVG 元素内的 fill 和 stroke 属性进行操作。以下是如何通过CSS来更改SVG颜色的基本方式：
填充颜色 (Fill Color)： 如果你想改变SVG图形内部填充的颜色，可以针对SVG内的相关元素（如 <path>、<circle>、<rect>、<polygon> 等）应用 fill 属性：
svg path {
fill: red;
}
这段代码将会把所有SVG路径元素的填充颜色改为红色。
描边颜色 (Stroke Color)： 要改变SVG图形边框或轮廓线的颜色，则可以使用 stroke 属性：
svg polyline {
stroke: blue;
}
这会将SVG中的所有<polyline>元素的描边颜色变为蓝色。
全局修改： 如果你希望统一修改SVG内所有形状的颜色，可以更广泛地选择SVG元素：
svg * {
fill: green;
stroke: yellow;
}
这段CSS会将SVG文档内的所有元素的填充和描边颜色分别设为绿色和黄色。
变量动态修改： 对于需要根据主题变化的场景，可以通过CSS变量来进行全局动态修改：
:root {
--main-color: black;
}
svg path {
fill: var(--main-color);
}
// 当主题颜色改变时，更新这个CSS变量
document.documentElement.style.setProperty('--main-color', 'new-color-value');
嵌入式SVG： 如果SVG是直接嵌入HTML文档内的，可以直接通过CSS选择器修改颜色，但对于作为背景图片或外部引用的SVG，通常需要在SVG文件内部预先设置可被CSS控制的类名或ID。
注意，为了使CSS能够有效地作用于SVG，SVG必须是以元素形式插入到HTML文档中，而不是作为背景图像或外部链接的图片。如果是外部链接的SVG，可能需要在SVG文件内部预定义class以便通过CSS控制。
如果使用的是，直接在CSS中使用SVG标签属性是不太可能，但有其他Hack 手段可用。第一种就是修改svg 文件的代码。第二中使用CSS的蒙层或混合模式。
https://www.w3cplus.com/css/dynamically-change-the-colors-product-image-with-css-blend-mode-and-svg.html
