通过颜色选择器全局修改svg图片的颜色

---

前言

此篇文章是一个原生js的项目，要想动态修改图片的颜色，就需要用到svg格式的图片，可以给svg图片下的path设置样式fill为你选择的颜色，即可动态修改图片的颜色

一、工具函数

//url:svg图片的路径
//dom：需要插入svg图片的dom结构
function setSvg(url, dom) {
    fetch(url)
        .then(response => response.text())
        .then(svgData => {
            let data = svgData;
            dom.insertAdjacentHTML('afterbegin', data)
        })
        .catch(error => {
            console.error('Error fetching SVG file:', error);
        });
}

此工具函数主要通过fetch获取自己的svg图片，拿到图片后用insertAdjacentHTML()方法插入到你想要放置的位置，此方法的第一个参数有四种选择，设置第二个参数的dom结构放置于dom的何处位置，此处不再赘述。第二个参数是你通过fetch拿到的svg文件的字符串表示形式，可以通过insertAdjacentHTML()转为html结构。

二、css

:root {
	--color: #eee;
}
svg > path{
	fill:var(--color)
}

：root是一个伪类，表示文档根元素。在:root中声明相当于全局属性，可以使用var()来引用。
用 – 这样写法加上样式名称 例如：–color，引用：var(–color)
svg > path给所有的svg下的path设置fill，对应的颜色就为我们在:root中设置的–color。

三、选择颜色，改变:root

	function onThemeChange() {
		let color = themeColor.getValue()
		const root = getComputedStyle(document.documentElement)
		// 获取全局属性值
		const color1 = root.getPropertyValue('--color').trim()
		// 设置属性值
		document.documentElement.style.setProperty('--color', color)
		const color2 = root.getPropertyValue('--color').trim()
		console.log(color1, color2) // red green
	}

当color改变时，调用onThemeChange函数，color为改变后的颜色，通过document.documentElement.style.setProperty(‘–color’, color)，设置:root
中的–color的值，就可以实现全局动态修改svg图片的颜色了。

如果有不懂或者实现过程中遇到问题，欢迎留言。