title: SVG CSS Hover Styling
body: <p>Trying to stylize a SVG of this multi-color HTML image using CSS so that the right side of the 5 is white on hover.  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background-color: gray;
  }
  svg {
    height: 50vh;
    fill: white;
  }
  .html5 g.st2 .st0 {
    fill: transparent;
  }
  .html5:hover path.st0 {
    fill: #e44d26;
  }
  .html5:hover path.st1 {
    fill: #f16529;
  }
  .html5:hover g.st2 .st0 {
    fill: white;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="-561 1804 379 407" style="enable-background:new -561 1804 379 407;" xml:space="preserve" class="html5"&gt;
    &lt;g&gt;
      &lt;path class="st0" d="M-427.3,1975.7h55.3v-42.9h-59.2L-427.3,1975.7z M-539.3,1821l30.5,341.7l136.8,38l136.9-37.9l30.5-341.8
    C-204.7,1821-539.3,1821-539.3,1821z M-261.3,2141l-110.7,30.7v-43.5l-0.1,0l-85.9-23.8l-6-67.3h42.1l3.1,34.9l46.7,12.6l0.1,0v-67
    h-93.7l-11.3-126.7h105v-41.9h136.8L-261.3,2141z" /&gt;
      &lt;path class="st1" d="M-320.4,2017.6H-372v67l46.7-12.6L-320.4,2017.6z M-372,1848.9v41.9h105l-3.8,41.9H-372v42.9h97.4l-11.5,128.7
    l-85.9,23.8v43.5l110.7-30.7l26.1-292.1L-372,1848.9L-372,1848.9z" /&gt;
      &lt;g class="st2"&gt;
        &lt;polygon class="st0" points="-372,1890.8 -477,1890.8 -465.7,2017.6 -372,2017.6 -372,1975.7 -427.3,1975.7 -431.2,1932.8 
     -372,1932.8   " /&gt;
        &lt;polygon class="st0" points="-372,2084.6 -372.1,2084.6 -418.7,2072 -421.9,2037.1 -463.9,2037.1 -457.9,2104.4 -372.1,2128.2 
     -372,2128.2   " /&gt;
      &lt;/g&gt;
    &lt;/g&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If you open the original svg (<a href="https://www.w3.org/html/logo/downloads/HTML5_1Color_Black.svg" rel="nofollow noreferrer">https://www.w3.org/html/logo/downloads/HTML5_1Color_Black.svg</a>) in Illustrator and grab the SVG code you'll notice there's no path/class to manipulate it with.  Not sure if the problem can be addressed in CSS or needs to be done in illustrator but any ideas or help would be appreciated.</p>