html - 使用存储在数据属性中的 css vars 进行动态着色

Question

我正在尝试使用 html 和 css 制作 SVG 图像。我需要通过替换不同的 css 变量来快速互换颜色。这是我目前的设置:

:root{
	--c1:#f00;
	--c2:#00f;
}
polygon{
	fill:var(attr(data-clr));
	stroke:var(attr(data-clr));
	stroke-width:1;
}

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width='100' height='100'>
	<polygon points="0,100 0,0, 100,0" data-clr="--c1"/>
	<polygon points="0,100 100,100, 100,0" data-clr="--c2"/>
</svg>

预期结果:由 2 个三 Angular 形组成的正方形，一个红色，一个蓝色。

实际结果:由 2 个黑色三 Angular 形组成的正方形。

请记住，在现实世界中，这将包括更多的多边形，并且只是对颜色进行硬编码，然后查找和替换将无法解决问题。 用类来做会导致很多重复的代码/代码模式，所以我想尽可能避免它。<- 我需要将 css 多边形重写为一个类，然后为整个 svg 图像中的每种颜色复制并粘贴具有正确颜色的该类。是的，不。

Answer 1

您可以像这样使用 style 属性，而不是使用数据属性:

polygon{
	fill:var(--c1);
	stroke:var(--c2);
	stroke-width:1;
}

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width='100' height='100' style="--c2:#00f;" >
	<polygon points="0,100 0,0, 100,0" style="--c1:#f00;" />
	<polygon points="0,100 100,100, 100,0" style="--c1:#00f;" />
</svg>

希望这就是您所需要的。

更新

OP 正在评论:

that means I won't be able to use drop-in stylesheets containing the vars... Meaning if I want to change colours I'll have to do a find and replace.

在这种情况下，您可以这样做:值 --c1 是另一个变量:var(--a1); --c2 也是如此

:root{
	--a1:#f00;
	--a2:#00f;
}


polygon{
	fill:var(--c1);
	stroke:var(--c2);
	stroke-width:1;
}

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width='100' height='100' style="--c2:#00f;" >
	<polygon points="0,100 0,0, 100,0" style="--c1:var(--a1);" />
	<polygon points="0,100 100,100, 100,0" style="--c1:var(--a2);" />
</svg>