SVG loading/drawing does not respect style definitions

[LukenSkyne]

When loading images with with loadImage(...) and drawing them using ctx.drawImage(...), I am getting this unstyled version of the SVG (ignore the background):

Inlining the styles gives the expected result:

This is the SVG used:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 26">
  <defs>
    <style>
      .cls-1 {
        fill: #fc6d26;
      }

      .cls-1, .cls-2, .cls-3 {
        stroke-width: 0px;
      }

      .cls-2 {
        fill: #e24329;
      }

      .cls-3 {
        fill: #fca326;
      }
    </style>
  </defs>
  <g>
    <path class="cls-2" d="m14,26l5.16-15.99h-10.31l5.16,15.99Z"/>
    <path class="cls-1" d="m14,26l-5.16-15.99H1.62l12.38,15.99Z"/>
    <path class="cls-3" d="m1.62,10L.05,14.86c-.07.22-.07.45,0,.66.07.22.21.4.39.54l13.56,9.93L1.62,10Z"/>
    <path class="cls-2" d="m1.62,10h7.23L5.74.37c-.04-.11-.1-.2-.19-.27-.09-.07-.2-.1-.31-.1s-.22.04-.31.1c-.09.07-.16.16-.19.27L1.62,10Z"/>
    <path class="cls-1" d="m14,26l5.16-15.99h7.23l-12.38,15.99Z"/>
    <path class="cls-3" d="m26.38,10l1.57,4.86c.07.22.07.45,0,.66-.07.22-.21.4-.39.54l-13.56,9.93,12.38-16Z"/>
    <path class="cls-2" d="m26.38,10h-7.23L22.26.37c.03-.11.1-.2.19-.27.09-.07.2-.1.31-.1s.22.04.31.1c.09.07.16.16.19.27l3.11,9.63Z"/>
  </g>
</svg>

[yisibl]

My suggestion would be to first use svgo to convert the style to an inline attribute.