如何在Firefox和Safari中模拟SVG‘指针-事件:边界-盒’

Question

我有一个带有嵌套SVG的SVG，它包含在各种<a>标记中。我希望整个嵌套的SVG能够激活链接(即是可点击的)，但是我似乎不能使用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>

​