Webcomponents: [question] Why are we unable to build web components from SVG elements?

Suppose I'm making a simple SVG game. I want to make custom elements with shadow roots that consist of SVG primitives (<rect>, <circle>, etc). The result would be like this:

<svg>
  <redwood-tree position="10 20"></redwood-tree>
  <player-tank position="30 50"></player-tank>
  <enemy-tank position="50 100"></enemy-tank>
  <!-- ... etc ... -->
</svg>

where each one of those elements could be defined as

customElements.define('player-tank', class extends SVGRectElement {
  constructor() {
    this.root = this.attachShadow({mode:'closed'})
    this.root.innerHTML = `<rect width="10" height="10"></rect>`
    // ... some more code to map `position` attribute to `x/y` attributes ...
  }
})

Demo (nothing happens): https://jsfiddle.net/pem90k9a (but if you try to place the player-tank element outside of an SVG tree, then it will say Uncaught TypeError: Illegal constructor anyways since we've extended SVGRectElement.

Why is SVG not component-friendly?