SVG element width and height set in html but appearing as 0 0 in inspector

I have an svg rect like this:

<svg class="legend-square">
  <defs>
    <pattern id="pattern1" width="3"
     height="3" patternunits="userSpaceOnUse" patterntransform="rotate(-45)">
      <rect width="2" height="3" transform="translate(0,0)" fill="purple"></rect>
    </pattern>
  </defs>
  <rect width="12" height="12" fill="url(#pattern1)"></rect>
</svg>

When I inspect the second rect with Chrome it has no width and height. There are no CSS rules applying to it. Why doesn't it get affected by width and height?