Как смоделировать SVG `указатель-события: ограничивающий прямоугольник` в Firefox & Safari

Question

У меня есть SVG с вложенными SVG внутри, которые обернуты в различные <a> теги. Я хотел бы, чтобы весь вложенный SVG активировал ссылку (т. Е. Был активным), но, похоже, я не могу использовать свойство CSS pointer-events: bounding-box поскольку это значение не поддерживается Safari & Firefox. (Это прекрасно работает в Chrome, однако).

Какой другой подход я мог бы использовать для имитации этого поведения в этих браузерах?

Answer 1

Закройте каждый SVG с прозрачным <rect> и оберните это с элементом ссылки.

<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>