CSS 修改SVG颜色并且宽高自适应

CSS 修改SVG颜色并且宽高自适应

需求

1. 下图中的图案和文字根据网站的主题色更新
2. 缩放屏幕大小时，图片可以根据屏幕大小自适应

解决过程

1. 刚开始用的 img 标签设置图片，可以自动自适应，但修改图片颜色需要滤镜，感觉比较复杂，所以放弃了此方法。
2. 想用字体图标是做，但还需要设计去重新帮忙弄，设计又很忙所以暂搁了此方法。
3. 最后用svg, 简单的svg 改变颜色很简单，但自适应却让我想了一会，最后想着用最笨的办法：
   裹一个 relative 定位的 div，底下放一个宽度100%透明的 img，上面覆盖一个 宽高100% 的 absolute 的 svg 图片，代码如下：

<style>
.svg-box{position: relative;
}
.svg-box img{opacity: 0;
}
.svg-box .svg-icon{position: absolute;left: 0;top: 0;width: 100%;height: 100%;
}
</style><div class="svg-box"><img src="multiple.png" width="100%"/><svg width="198" height="206" viewBox="0 0 198 206" fill="none" xmlns="" class="svg-icon"><rect x="8.5" y="24.5" width="181" height="181" rx="3.5" fill="#fff" stroke="#E6007A"/><rect x="4.5" y="12.5" width="189" height="189" rx="3.5" fill="#fff" stroke="#E6007A"/><rect x=".5" y=".5" width="197" height="197" rx="3.5" fill="#fff" stroke="#E6007A"/><path fill-rule="evenodd" clip-rule="evenodd" d="M113.142 113.142c7.811-7.81 7.811-20.474 0-28.284-7.81-7.81-20.474-7.81-28.284 0-7.81 7.81-7.81 20.474 0 28.284 7.81 7.811 20.474 7.811 28.284 0zM109 99a2 2 0 0 1-2 2h-6v6a2 2 0 0 1-4 0v-6h-6a2 2 0 0 1 0-4h6v-6a2 2 0 1 1 4 0v6h6a2 2 0 0 1 2 2z" fill="#E6007A"/></svg>
</div>

后来发现 去掉透明 img 和定位，仍然有效，代码见下方解决方法

解决方法

HTML

<div class="svg-box"><svg width="198" height="206" viewBox="0 0 198 206" fill="none" xmlns="" class="svg-icon"><rect x="8.5" y="24.5" width="181" height="181" rx="3.5" fill="#fff" stroke="#E6007A"/><rect x="4.5" y="12.5" width="189" height="189" rx="3.5" fill="#fff" stroke="#E6007A"/><rect x=".5" y=".5" width="197" height="197" rx="3.5" fill="#fff" stroke="#E6007A"/><path fill-rule="evenodd" clip-rule="evenodd" d="M113.142 113.142c7.811-7.81 7.811-20.474 0-28.284-7.81-7.81-20.474-7.81-28.284 0-7.81 7.81-7.81 20.474 0 28.284 7.81 7.811 20.474 7.811 28.284 0zM109 99a2 2 0 0 1-2 2h-6v6a2 2 0 0 1-4 0v-6h-6a2 2 0 0 1 0-4h6v-6a2 2 0 1 1 4 0v6h6a2 2 0 0 1 2 2z" fill="#E6007A"/></svg>
</div>

CSS

:root{--mainColor: #e6007a;
}
.svg-box .svg-icon{width: 100%;height: 100%;
}
.svg-icon rect{stroke:var(--mainColor);
}
.svg-icon path{fill:var(--mainColor);
}

JS: 修改主题色

let root = document.querySelector(":root");
root.style.setProperty("--mainColor", '你想设置的主题颜色，如：#3498db');

我的个人博客，有空来坐坐