chrome svg symbol transition bug

Top svg bugged on hover, bottom svg fixed with color hack

by shrpne

HTML

<svg class="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 932 250">

  <symbol id="n">
    <polygon class="line-left" points="0,0 37,0 37,240 0,240"></polygon>
    <polygon class="line-middle" points="232,240 185,240 0,0 47,0"></polygon>
    <polygon class="line-right" points="175,0 212,0 212,240 175,240"></polygon>
  </symbol>

  <g fill="currentColor">
    <use class="use-n" xlink:href="#n" x="262" y="5" width="232" height="240"></use>
  </g>
  
</svg>

<svg class="svg2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 932 250">

  <symbol id="n2">
    <polygon class="line-left" points="0,0 37,0 37,240 0,240"></polygon>
    <polygon class="line-middle" points="232,240 185,240 0,0 47,0"></polygon>
    <polygon class="line-right" points="175,0 212,0 212,240 175,240"></polygon>
  </symbol>
  
  <g fill="currentColor">
    <use class="use-n" xlink:href="#n2" x="262" y="5" width="232" height="240"></use>
  </g>
  
</svg>

SCSS

[class^="line-"], .use-n {transition: 0.3s;}
.line-left, .line-right {opacity: 0;}
svg:hover {
  .use-n {transform: translateX(30px);}
  .line-middle {transform:scaleX(0.916);}
  .line-left, .line-right {opacity: 1;}
}
.svg2:hover {
  color: red;
}