How to simulate SVG `pointer-events: bounding-box` in Firefox & Safari

I have an SVG with nested SVGs inside of it that are wrapped inside various <a> tags. I would like the entire nested SVG to activate the link (i.e. be clickable), but it seems I cannot use the CSS property pointer-events: bounding-box as that value isn't supported by Safari & Firefox. (This works great in Chrome, however).

What other approach could I use to simulate this behavior in these browsers?

Solution

Cover each SVG with a transparent <rect> and wrap that with the link element.

<svg width="300" height="200">

  <a xlink:href="http://www.google.com">
    <svg x="50" y="50" width="200" height="100">
      <ellipse cx="100" cy="50" rx="100" ry="50" fill="red"/>
    </svg>
  </a>
  
</svg>

<svg width="300" height="200">

  <svg x="50" y="50" width="200" height="100">
    <ellipse cx="100" cy="50" rx="100" ry="50" fill="green"/>
  </svg>
  <a xlink:href="http://www.google.com">
    <rect x="50" y="50" width="200" height="100" fill="transparent"/>
  </a>
  
</svg>