Edit in JSFiddle

<button id="stroke">stroke 表示・非表示</button>
<button id="fill">fill 表示・非表示</button>
<div class="wrapper">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 112 140" enable-background="new 0 0 112 140" xml:space="preserve">
      <g class="logo">
          <polygon points="27.9,69.7 0,83.6 27.9,97.5 55.7,83.6"></polygon>
          <polygon points="83.6,97.5 111.5,83.6 83.6,69.7 55.7,83.6"></polygon>
          <polygon points="27.9,97.5 55.7,111.5 83.6,97.5 55.7,83.6"></polygon>
          <polygon points="27.9,41.8 0,55.7 27.9,69.7 55.7,55.7"></polygon>
          <polygon points="83.6,69.7 111.5,55.7 83.6,41.8 55.7,55.7"></polygon>
          <polygon points="27.9,69.7 55.7,83.6 83.6,69.7 55.7,55.7"></polygon>
          <polygon points="27.9,13.9 0,27.9 27.9,41.8 55.7,27.9"></polygon>
          <polygon points="83.6,41.8 111.5,27.9 83.6,13.9 55.7,27.9"></polygon>
          <polygon points="27.9,41.8 55.7,55.7 83.6,41.8 55.7,27.9"></polygon>
          <polygon points="83.6,13.9 55.7,0 27.9,13.9 55.7,27.9"></polygon>
      </g>
    </svg>
</div>

.wrapper {
  width: 56.25%;
  margin-top: 1em;
}

.logo {
    fill: none;
    stroke: black;
    stroke-width: 1;
    stroke-dasharray: 125;
    stroke-dashoffset: 125;
    -webkit-transition: stroke-dashoffset 1s ease-out;
    transition: stroke-dashoffset 1s ease-out;
    polygon {
        fill: transparent;
        -webkit-transition: fill 1s ease-out;
        transition: fill 1s ease-out;
    }
}

.stroke-visible {
    stroke-dashoffset: 0;
}

$clr: #E9A21F #E78E21 #EDB51C #DD6664 #DC5D54 #D94142 #78BEB2 #5AB5B0 #686F89 #23AAA4;

@for $i from 1 through length($clr) {
  .logo.fill-visible polygon:nth-child(#{$i}) {
    fill: nth($clr, #{$i})
  }
}

toggleClass = (el, className) ->
  if el.classList
    el.classList.toggle className
  else
    classes = el.className.split ' '
    existingIndex = classes.indexOf className
    if existingIndex >= 0
      classes.splice existingIndex, 1
    else
      classes.push className
    el.className = classes.join ' '

logo = document.querySelector '.logo'
strokeBtn = document.getElementById 'stroke'
fillBtn = document.getElementById 'fill'
strokeBtn.addEventListener 'click', -> toggleClass logo, 'stroke-visible'
fillBtn.addEventListener 'click', -> toggleClass logo, 'fill-visible'