Question

我有一个SVG，里面有嵌套的SVG，这些SVG包装在各种<a>标签内。我希望整个嵌套的SVG激活链接（即可单击），但是由于Safari和Firefox不支持该属性，因此我似乎无法使用CSS属性pointer-events: bounding-box。（不过，这在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`

1 个答案: