如何在 Firefox 和 Safari 中模拟 SVG `pointer-events: bounding-box`

Question

我有一个 SVG，其中包含嵌套在各种 <a> 标签中的嵌套 SVG。我希望整个嵌套 SVG 激活 link（即可点击），但似乎我无法使用 CSS 属性 pointer-events: bounding-box，因为不支持该值通过 Safari 和 Firefox。（然而，这在 Chrome 中非常有效）。

我可以使用哪些其他方法来模拟这些浏览器中的这种行为？

Answer 1

用透明 <rect> 覆盖每个 SVG，并用 link 元素包裹它。

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

如何在 Firefox 和 Safari 中模拟 SVG `pointer-events: bounding-box`

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

css

safari

firefox

svg

pointer-events