Change color fill SVG with javascript

Question

I'm trying to change the fill color of my SVG before it transform in canvas. In this example, i wish change the fill color of my cls-1 class to red, how can I do that ?

function createMarker() {
    var canvas, context;

    canvas = document.createElement("canvas");
    canvas.width = 16;
    canvas.height = 16;


    var svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 14 14">'
        +'<defs>'
        +'<style>.cls-1{fill:blue;}.cls-2{fill:none;}</style>'
        +'</defs>'
        +'<g id="mask" data-name="mask">'
        +'<g id="device" data-name="device">'
        +'<path class="cls-1" d="M6,0a6,6,0,1,0,6,6A6,6,0,0,0,6,0ZM5.6,1.1a.65.65,0,0,1,.9.5V5.7a.76.76,0,0,1-.2.5.66.66,0,0,1-.6.1c-.2-.1-.4-.2-.4-.5,0,0-.1-1.5-.1-2.1v-2A.68.68,0,0,1,5.6,1.1ZM9.5,8.4A4,4,0,0,1,8.2,9.7a4.53,4.53,0,0,1-2.4.7,4.2,4.2,0,0,1-2.1-.6A3.74,3.74,0,0,1,2.4,8.6a3.77,3.77,0,0,1-.7-2.1A3.67,3.67,0,0,1,2.4,4,4.36,4.36,0,0,1,3.8,2.7a.52.52,0,0,1,.8.2.52.52,0,0,1-.2.8A3.84,3.84,0,0,0,3.3,4.8a2.54,2.54,0,0,0-.4,1.7A3,3,0,0,0,3.4,8,3.46,3.46,0,0,0,4.5,9,2.7,2.7,0,0,0,6,9.3a2.41,2.41,0,0,0,1.8-.7,2.9,2.9,0,0,0,1-2.9,3.23,3.23,0,0,0-1.4-2,.61.61,0,0,1-.1-1A.62.62,0,0,1,8,2.6a3,3,0,0,1,.7.5A4.81,4.81,0,0,1,9.9,4.7a4,4,0,0,1,.3,1.5A5.68,5.68,0,0,1,9.5,8.4Z"/>'
        +'<path class="cls-2" d="M6,0a6,6,0,1,0,6,6A6,6,0,0,0,6,0Z"/>'
        +'</g>'
        +'</g>'
        +'</svg>';

    /*********************************/
    /* change .cls-1 fill color blue to red here */
    /*********************************/

    canvg(canvas, svg);

    context = canvas.getContext("2d");

    //Selected
    context.lineWidth = 1;
    context.strokeStyle = "black";
    context.stroke();

    return canvas.toDataURL();
}