title: Change color fill SVG with javascript
body: <p>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 ?</p>
  
  <pre><code>function createMarker() {
      var canvas, context;
  
      canvas = document.createElement("canvas");
      canvas.width = 16;
      canvas.height = 16;
  
  
      var svg = '&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 14 14"&gt;'
          +'&lt;defs&gt;'
          +'&lt;style&gt;.cls-1{fill:blue;}.cls-2{fill:none;}&lt;/style&gt;'
          +'&lt;/defs&gt;'
          +'&lt;g id="mask" data-name="mask"&gt;'
          +'&lt;g id="device" data-name="device"&gt;'
          +'&lt;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"/&gt;'
          +'&lt;path class="cls-2" d="M6,0a6,6,0,1,0,6,6A6,6,0,0,0,6,0Z"/&gt;'
          +'&lt;/g&gt;'
          +'&lt;/g&gt;'
          +'&lt;/svg&gt;';
  
      /*********************************/
      /* 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();
  }
  </code></pre>