JSFiddle - React, Tailwind, and code Playground

by Ivan Vasilyev

HTML

<canvas id="c" width="8000px" height="10300px"></canvas>

CSS

.str2 {
     stroke: #C6C7C7;
     stroke-width: 22.54
   }
   
   .str0 {
     stroke: #C6C7C7;
     stroke-width: 22.54;
     stroke-linecap: round
   }
   
   .str1 {
     stroke: #C6C7C7;
     stroke-width: 22.54;
     stroke-linecap: round;
     stroke-linejoin: round
   }
   
   .fil0 {
     fill: none
   }
   
   .fil3 {
     fill: black
   }
   
   .fil2 {
     fill: lightgrey
   }
   
   .fil1 {
     fill: #C5C6C6;
     fill-rule: nonzero;
   }
   
   .container {
     display: none;
   }

JavaScript

var url = 'https://s3-eu-west-1.amazonaws.com/media.ticketscloud/production/map/2015-10/562f74479cb5384ec5074358-562f74479cb5384ec5074357.svg';
var url = '';

var canvas = new fabric.Canvas('c');
fabric.loadSVGFromURL(url, callback, reviver);

function reviver(s, f) {
  f.set('data', s.getAttribute('id'));
}


function callback(objects, options) {
  canvas.add.apply(canvas, objects);
	canvas.forEachObject(function(obj) {
    if (obj.type === 'circle') {
      obj.bringToFront();
      obj.set('hoverCursor', 'pointer');
    } else {
    	obj.set('hoverCursor', 'default');
    }
    obj.set('hasBorders', false);
  	obj.set('hasControls', false);
    obj.set('lockMovementX', true);
    obj.set('lockMovementY', true);
  });
  zoomIt(canvas, .125);
}

canvas.on('mouse:down', function(options) {
  if (options.target) {
  	switch (options.target.type) {
    	case 'circle':
      	options.target.set('fill', '#993300')
        console.log(options.target.get('data'))
      	break;
      default:
    }
    console.log('an object was clicked! ', options.target.type);
    canvas.renderAll();
  }
});

function zoomIt(canvas, factor) {
  canvas.setHeight(canvas.getHeight() * factor);
  canvas.setWidth(canvas.getWidth() * factor);
  if (canvas.backgroundImage) {
    // Need to scale background images as well
    var bi = canvas.backgroundImage;
    bi.width = bi.width * factor;
    bi.height = bi.height * factor;
  }
  var objects = canvas.getObjects();
  for (var i in objects) {
    var scaleX = objects[i].scaleX;
    var scaleY = objects[i].scaleY;
    var left = objects[i].left;
    var top = objects[i].top;

    var tempScaleX = scaleX * factor;
    var tempScaleY = scaleY * factor;
    var tempLeft = left * factor;
    var tempTop = top * factor;

    objects[i].scaleX = tempScaleX;
    objects[i].scaleY = tempScaleY;
    objects[i].left = tempLeft;
    objects[i].top = tempTop;

    objects[i].setCoords();
  }
  canvas.renderAll();
  canvas.calcOffset();
}