SVG通过CSS变量修改颜色后转PNG，修改颜色未保留问题求助

我在SVG中定义了带CSS变量的样式，通过JavaScript随机颜色函数修改CSS变量值后，SVG在页面显示正常，但将修改后的SVG转换为PNG时，PNG显示的是原始颜色而非修改后的颜色。

相关代码 #

SVG样式定义

<style type="text/css">
:root{
    --back:#662D91;
    --shadow:0.28;
    --highlight:#F3B4AE;
    --stomach:#EA8A82;
    --lightHigh:#FEE9E5;
    --lasso:#9B5D12;
    --gloves:#29A6DE;--glovesStroke:#000674;--gloves2:#29A6DE;--gloves3:#1C7FC9;--gloves4:#1D7DC6;--gloves5:#1C7DC4;
    --hatBelow:#DB8556;
    --hatBelow2:#8A3C13;
    --hatInner:#8C4017;
    --hatInner2:#934A24;
    --hatInner3:#9D5C3A;
    --stripe:#8A7454;
    --stripeEnd:#382000;

}
    .st0{fill:var(--back);}
    .st1{opacity:var(--shadow);}
    .st2{fill:var(--highlight);}
    .st3{fill:var(--stomach);}
    .st4{fill:var(--lightHigh);}
    .st5{fill:var(--lasso);}
    .st6{filter:url(#Adobe_OpacityMaskFilter);}
    .st7{filter:url(#Adobe_OpacityMaskFilter_1_);}
    .st8{clip-path:url(#SVGID_3_);mask:url(#SVGID_4_);fill:url(#SVGID_5_);}
    .st9{opacity:0.7;clip-path:url(#SVGID_3_);fill:url(#SVGID_6_);}
    .st10{fill:url(#SVGID_10_);}
    .st11{fill:#FFD2B3;}
    .st12{fill:#EEBD9C;}
    .st13{fill:#FFE3CE;}
    .st14{fill:#AF7B6E;}
    .st15{fill:var(--gloves);stroke:var(--glovesStroke);stroke-miterlimit:10;}
    .st16{fill:var(--gloves2);}
    .st17{fill:var(--gloves3);}
    .st18{fill:var(--gloves4);}
    .st19{fill:var(--gloves5);}
</style>

修改CSS变量的代码

root.style.setProperty('--back',colors[0]);

SVG转PNG的代码

var svgString = new XMLSerializer().serializeToString(document.querySelector('svg'));
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var DOMURL = self.URL||self.webkitURL||self;
var img = new Image();
var svg = new Blob([svgString],{type: "image/svg+xml;charset=utf-8"});
var url = DOMURL.createObjectURL(svg);
img.onload = function(){
ctx.drawImage(img,0,0);
var png = canvas.toDataURL("image/png");
document.querySelector('#png-container').innerHTML = '<img src="'+png+'"/>';
DOMURL.revokeObjectURL(png);
};
img.src = url;

问题原因 #

XMLSerializer序列化SVG时，只会读取SVG内部的静态DOM结构（包括<style>标签里的初始CSS变量值），但通过root.style.setProperty()动态设置到元素上的CSS变量，属于元素的inline style属性，不会被同步到<style>标签的:root规则中。因此生成的SVG Blob仍使用原始变量值，转PNG时自然显示初始颜色。

解决方案 #

方案一：同步动态变量到SVG内部的