SVG animation rotation with transform-origin not working

Question

Can't seem to figure out why transform-origin: 50% 50%; isn't working.

Expecting it to set the origin to the center of the polygon and have it rotate in place.

svg {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}

.square {
  /*
  This makes the dash the same size as the border of the container
  with = spaces
    */

    /* hidden */
  stroke-dasharray: 1310;

  animation: draw-square 2s infinite;
}




.hex {
  stroke-dasharray: 900;

  animation: draw-hex 1.9s infinite;
  /* sepecifies the origin center,  default is top left */
  transform-origin: 50% 50%;
}


@keyframes draw-hex {
  0% {
    /* off set the start point of dashes */
    stroke-dashoffset: -900;
    transform: rotate(0deg)
  }
  /* Bring  */
  100% {
    stroke-dashoffset: 0;
    transform: rotate(360deg);
  }

}


@keyframes draw-square {
  0% {
    /* off set the start point of dashes */
    stroke-dashoffset: -1310;
  }
  /* Bring  */
  100% {
    stroke-dashoffset: 0;
  }

}

  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="360px" height="300px" viewBox="0 0 360 300" version="1.1">
  <!--Generator: Sketch 50 (54983) - http://www.bohemiancoding.com/sketch-->

    <defs/>
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
      <g transform="translate(-306.000000, -371.000000)">
        <circle stroke="#979797" fill="#FB4836" cx="486" cy="521" r="100"/>
        <text font-family="SignPainter-HouseScript, SignPainter" font-size="130" font-style="condensed" font-weight="normal" fill="#FFFFFF">
          <tspan x="385.095" y="554">Duel</tspan>
        </text>

        <polygon class="hex" stroke="#1F3380" stroke-width="3" transform="translate(486.000000, 521.000000)  translate(-486.000000, -521.000000) " points="486 371 615.903811 446 615.903811 596 486 671 356.096189 596 356.096189 446"/>

       <rect class="square" stroke="#FB4836" stroke-width="3" x="307.5" y="372.5" width="357" height="297"/>

      </g>
    </g>
  </svg>

link to codepen