2

I have an SVG with nested SVGs inside of it that are wrapped inside various <a> tags. I would like the entire nested SVG to activate the link (i.e. be clickable), but it seems I cannot use the CSS property pointer-events: bounding-box as that value isn't supported by Safari & Firefox. (This works great in Chrome, however).

What other approach could I use to simulate this behavior in these browsers?

etipaced
  • 125
  • 1
  • 11

1 Answers1

3

Cover each SVG with a transparent <rect> and wrap that with the link element.

<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>
Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
  • I ended up placing both the SVG and transparent rectangle inside the anchor, so I could reference them via CSS more easily (I wanted mouseover effects on the underlying SVG). So like this: `` – etipaced Dec 08 '18 at 00:50