CSS 改变 svg 图片颜色

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


声明:本站所有文章和图片,如无特殊说明,均为原创发布。商业转载请联系作者获得授权,非商业转载请注明出处。
真诚赞赏,手留余香
赞赏
搜神记
763 文章
4 教程
8 项目
随机推荐
WordPress关闭自动草稿
JavaScript 窗口/文档事件
WordPress 常用的路径
JavaScript API 接口
用 JavaScript 实现数字增加滚动动画
WordPress 用户元信息 get_user_meta() 和 set_user_meta()
如何调整 iconfont 图标的位置和基线
Node.js stream 流