CODEWITHSUNDEEP
csssvg
Akash Saikia
Akash Saikia

Reputation: 452

Svg with pointer events not working in safari

I have been working with SVG elements ( shapes ), and in cases I have to allow the mouse clicks to pass through those elements where it is transparent or say there are no actual shape.

To achieve this I have used pointer-events:none the css property to the root SVG tag, this works fine in Most of the browsers including IE and Mozilla too.

But Safari seems to have no affect of this css property. Here is the fiddle to check :

'http://jsfiddle.net/AkashSaikia/52aWw/2/'

Does any body has idea about this ? Or a work around for this ?

Upvotes: 0

Views: 2210

Answers (2)

MarmiK
MarmiK

Reputation: 5775

I have updated fiddle with rect element in SVG Please check if it's working.

<rect style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0.3; " fill="none" stroke="#ffff00" height="20" width="80"  stroke-width="10" x=2 y=2 opacity="0.3"></rect>

The problem is with Safari with SVG element although it says it supports but does not support 100% extensions/tags of the same..

You can also change the DocType if that works,

<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>

Let me know the results.

Upvotes: 1

Rik Del Mar
Rik Del Mar

Reputation: 229

I've made an example that works on all browsers and safari on iPad

See this page

http://www.janvas.com/illustrators_designers_developers/projects/janvas2D_web/examples_EN.php?exampleName=green_monster_game_EN

at the line 121 of the javascript code there is:

cloned_explosion_sprite.style.pointerEvents = 'none';

this line make off the mouse/touch event for the explosion sprite that, when added to the dom, stays between the mouse and others monsters.

Let me know

Upvotes: 1

Related Questions