Stop embedded SVGs from capturing mouse events on Chrome

Question

Pretty straightforward. I have an SVG embedded in my document through <object> and I'm applying pointer-events:none in the style at the root <svg>. It works in Firefox but not in Chrome (I'm not interested in any other browsers at the moment)

MWE

Have an HTML file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Why you no fix, Chrome?</title>
</head>
<body>
    <a id="click"><object data="svg.svg" type="image/svg+xml"></object></a>
    <script>document.getElementById('click').addEventListener('click',e => console.log(e));</script>
</body>
</html>

Have an SVG file

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" style="pointer-events:none">
    <path fill="#4a90d6" fill-opacity="1" stroke="#222222" stroke-width="2" d="M 0 0 L 100 0 L 50 100 z" />
</svg>

If there is no way to allow the event to bubble up to the anchor (ie: stop svg from capturing), then a way to pass an event through the event horizon would also be nice

EDIT

I forgot to add that the <object> element has to remain clickable. And I emphasize that the MWE works in Firefox but not in Chrome

No. I need to programmatically (sp?) access some svg properties. `` tags make such requirements unfulfillable — hanzo2001, Jan 25 '17 at 16:40
Sounds like you'll need to put the SVG inline then in order to get round the Chrome issue. — Robert Longson, Jan 25 '17 at 16:45

score 2 · Answer 1 · answered Jan 26 '17 at 18:04

2

try

<object style="pointer-events:none" ... >

that should do the trick ;-)

answered Jan 26 '17 at 18:04

Holger Will

7,228
1
31
39

right.... but now I can't click on ` – hanzo2001 Jan 26 '17 at 18:10
I thought about it but it's impractical in my current situation. It is a pretty good idea ^^ – hanzo2001 Jan 26 '17 at 19:21

Stop embedded SVGs from capturing mouse events on Chrome

MWE

EDIT

1 Answers1