JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<?xml version="1.0" encoding="utf-8"?>
  <!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
  <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 462 213" style="enable-background:new 0 0 462 213;" xml:space="preserve">
    <style type="text/css">
      .st0 {
        fill: #C2B59B;
      }
      
      .st1 {
        fill: #1B3A1B;
        stroke: #6D6E71;
        stroke-width: 0.5;
        stroke-miterlimit: 10;
      }
      
      .st2 {
        fill: none;
        stroke: #6D6E71;
        stroke-width: 0.5;
        stroke-miterlimit: 10;
      }
      
      .st3 {
        fill: #2E3192;
      }
      
      .st4 {
        fill: #2E3192;
        stroke: #000000;
        stroke-miterlimit: 10;
      }
      
      .st5 {
        fill: #2E3192;
        stroke: #2C318C;
        stroke-width: 3;
        stroke-miterlimit: 10;
      }
      
      .st6 {
        fill: #2E3192;
        stroke: #2E3192;
        stroke-width: 3;
        stroke-miterlimit: 10;
      }
      
      .st7 {
        fill: #FFFFFF;
      }
      
      .st8 {
        fill: none;
        stroke: #000000;
        stroke-width: 2;
        stroke-miterlimit: 10;
      }

    </style>
    <g id="Wall_Panels">
      <polygon class="st0" points="20.5,80.9 96.7,13.7 354.5,43.5 447.7,86.7 445.4,179.9 197.5,196.9 20.5,169.8 " />
    </g>
    <g id="Roof_Panels">
      <polygon class="st1" points="96.7,13.7 354.5,43.5 447.7,86.7 197.5,68.3 97.5,19.5 " />
    </g>
    <g id="Horizontal_Panels">
      <g>
        <line class="st2" x1="24" y1="76.3" x2="24" y2="171" />
        <line class="st2" x1="28" y1="72.5" x2="28" y2="171" />
        <line class="st2" x1="31.8" y1="69.8" x2="31.8" y2="172.3" />
        <line class="st2" x1="36" y1="66.5" x2="36" y2="172.3" />
        <line class="st2" x1="40.3"...

CSS

svg {
  max-width: 600px;
  display: inline-block;
}

#app,
.controls {
  display: inline-block;
}

span.color {
  display: inline-block;
  width: 50px;
  height: 50px;
  cursor: pointer;
}

path,
polygon,
rect {
  transition: .2s all;
}

.st3 {
  stroke: black;
  stroke-width: 1px;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    sections: [{
      selector: '.st0',
      fill: 'white'
    }, {
      selector: '.st1',
      fill: 'white'
    }, {
      selector: '.st3, .st4',
      fill: 'white'
    }],
    colors: ['white', 'black', '#1abc9c', '#2ecc71', '#3498db', '#9b59b6', '#34495e'],
    hover: null,
    hoverColor: null
  },
  mounted: function() {
    this.update();
  },
  methods: {
    update: function() {
      var self = this;
      this.sections.forEach(function(section, i) {
        [].forEach.call(document.querySelectorAll(section.selector), function(el) {
          el.style.fill = i === self.hover ? self.hoverColor : section.fill;
        });
      })
    }
  },

  watch: {
    sections: {
      handler: 'update',
      deep: true
    },
    hover: 'update',
    hoverColor: 'update'
  }
});