How do I get d3.zoom working for inline svg?

I am trying to use d3.zoom on an inline svg, specifically a map of the USA (please note that I am very inexperienced at d3js). After some research I found a simple tutorial for using d3.zoom https://www.datamake.io/blog/d3-zoom/.

The issue I have now is that it just doesn't work. There is no error which shows up. It just does nothing.

Here is the HTML code with the svg map.

   <div id="map">

      <?xml version="1.0" encoding="UTF-8"?>
      <svg id="usa_svg" height="800" width="1200" version="1.1" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">

        <g id="USA">
          <rect height="600" width="1200"></rect>
          <!-- paths here -->
        </g>

      </svg>

   </div>

Here is the JavaScript

var usa = d3.select("svg")
var rect = d3.select("rect");
var zoom = d3.zoom().on("zoom", zoomed);

rect.call(zoom);

function zoomed() {
  var transform = d3.event.transform;
  usa.attr("transform", transform.toString());
}

I have no clue what I am doing wrong. Is it a syntax error? Am I just missing a vital part of the code? Help would be much appreciated.