Vue svg map

by jpeter06

HTML

<div id="app">
  <h2>Todos:</h2>
	<svg 	ref="svg" draggable="false" version="1.1" viewBox={viewbox} class="svg-content" 
  onmouseup={mouseup} onmousedown={mousedown} 
  onmousemove={mousemove}>
        
   <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:white;stop-opacity:1" />
      <stop offset="100%" style={'stop-color:'+color+';stop-opacity:1'} />
    </linearGradient>
  </defs>
    
    <path draggable="false" each={ fig in this.figs }   d={fig.path}  
    riot-transform={fig.transform} 
    fill={fillColor(fig.id)}  onmouseover={mouseover}
    onmouseout={mouseout}/>
  
  	<polyline points="350,350 400,270 570,270"
  	style="fill:none;stroke:#CCCCCC;stroke-width:1" />
  
  	<polygon points="100,340 240,340 240,360 100,360" fill="url(#grad1)"
  	style="stroke:gray;stroke-width:1" />
  	<text draggable="false" x="250" y="350" fill="white">{this.maxValue} Kwh</text>

	  <circle each={c in this.points}
  		cx={c.x} cy={c.y} r="7" 
      stroke="none" stroke-width="0" fill={c.color} />

		<rect if={this.drawRectangle} 
    x={rx} y={ry}
    width={width} height={height}
    style="fill:rgba(0,0,255,0.2);stroke-width:3;stroke:rgb(0,0,0)" />
  </svg>
  
  <div if={provincia} class="info">
  	<h4 >{provincia}{this.startX}</h4>
    <span >Kwh: {this.valores[this.idProv]}</span>
  </div>
</div>

CSS

body {
  background: #20262E;
  padding: 10px;  margin:0px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

Vue

new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Learn JavaScript", done: false },
      { text: "Learn Vue", done: false },
      { text: "Play around in JSFiddle", done: true },
      { text: "Build something awesome", done: true }
    ]
  },
  methods: {
  	toggle: function(todo){
    	todo.done = !todo.done
    }
  }
})