JSFiddle - React, Tailwind, and code Playground

HTML

<body style="overflow: hidden;">
<div style="width: 100vw; height: 100vh">
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g>
    <defs>
      <pattern id="floor" viewBox="0 0 3508 4962" width="100%" height="100%" patternContentUnits="objectBoundingBox" preserveAspectRatio="xMidYMid meet">
      <image id="test" width="3508" height="4962" preserveAspectRatio="xMinYMin meet"></image>
      </pattern>
    </defs>
    <g id="mapZoom">
    <rect width="100%" height="100%" fill="url(#floor)">   
    </rect>

    </g>
  </g>
</svg>
</div>
</body>

CoffeeScript

zoomed = ->
	d3.select "#mapZoom"
 		.attr("transform", "translate(#{d3.event.translate}) scale(#{d3.event.scale})")
	return
zoom = d3.behavior.zoom().scaleExtent([1, 10]).on("zoom", zoomed)
d3.select("svg > g").call zoom
file = "http://i.imgur.com/oAKT1WG.jpg"
d3.selectAll("#test")
	.attr(
  	"xlink:href": file
  )