I have applied a style to an svg image and successfully changed the fill color using a random colors function in JavaScript. However, when I convert the svg to a png format after making these color changes, the PNG file retains the original colors instead of the updated ones.
<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);}
(other CSS styles omitted for brevity)
</style>
This is the style element within my svg that I am modifying with the following code:
root.style.setProperty('--back',colors[0]);
The 'colors' variable contains an array of randomly generated colors created by a script embedded within the svg. Can someone please assist me with resolving this issue?
Here is how I am converting the svg to png:
<script>
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;
</script>