Как смоделировать 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>