JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css">
<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="map"></div>

CSS

#map {
  width: 500px;
  height: 500px;
}

/* sample matrix transform on the building layer */
.building {
  transform: scale(.163, .163) rotate(28.65deg) translate(479px, 0px)
}

.overlay-bounding-box {
  stroke: #C336F8;
  stroke-opacity: 1;
  -webkit-filter: drop-shadow( 0 3px 2px hsla(0, 0%, 0%, 0.4));
            filter: drop-shadow( 0 3px 2px hsla(0, 0%, 0%, 0.4));
}

JavaScript

// create the map object itself
centerCoordinates = new L.LatLng(41.307, -72.928);

var map = new L.Map("map", {
  center: centerCoordinates,
  zoom: 14,
  zoomControl: false
});

// position the zoom controls in the bottom right hand corner
L.control.zoom({
  position: 'bottomright',
  zoom: 14,
  maxZoom: 20,
  minZoom: 12,
}).addTo(map);

map.addLayer(new L.tileLayer('http://tile.stamen.com/terrain/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
  subdomains: 'abcd',
  maxZoom: 19
}));

// specify the coordinates of the overlay's bounding box
var upperLeft = L.latLng(41.329785, -72.927220);
var lowerLeft = L.latLng(41.304414, -72.945686);
var upperRight = L.latLng(41.319186, -72.903268);
var lowerRight = L.latLng(41.293816, -72.921718);

// create a red polyline from an array of LatLng points
var polyline = L.polyline(
  [upperLeft, upperRight, lowerRight, lowerLeft, upperLeft], {
    className: 'overlay-bounding-box',
    weight: 4
  }
).addTo(map);

d3.xml("https://s3-us-west-2.amazonaws.com/gathering-a-building/2000_Cooper_Robertson_G_cutout1_full.svg",
  function(rawSvg) {
  
    // extract the path elements in the svg
    var svgPaths = rawSvg.getElementsByTagName("path");

    // identify the DOM element to which the paths should be appended
    var overlayTarget = document.getElementsByClassName("overlay-bounding-box")[0];

    // append that element to the SVG tags of the bounding box drawn above
    for (var i=0; i<svgPaths.length; i++) {
      var newNode = overlayTarget.parentNode.appendChild(svgPaths[i]);

      // add features to the new DOM element
      newNode.setAttribute('class', 'leaflet-zoom-hide leaflet-clickable building building-' + i);
      newNode.setAttribute('stroke', 'blue');
      newNode.setAttribute('stroke-linejoin', 'round');
      newNode.setAttribute('stroke-linecap', 'round');
     ...