All geek questions in one place

SVG elements cannot display shadow filter in Safari

I found that the Safari browser and iOS Safari cannot / do not show SVG shadows (filters) for some reason. At least for me, the shadows will not be displayed only in Safari iOS and Safari Desktop, it works in chrome and firefox.

Is there a way to get the SVG element to display the shadow in iOS Safari? The website is designed exclusively for the iPad, so this is a major mistake

I draw dynamic arrows, arrows can / will have different sizes and shifts of the shadow. Therefore, I use SVG elements. The problem is that SVG shadows are never displayed in Safari for some reason.

This is really frustrating. I went to HTML5 Canvas to draw arrows, but I think the rotation is funny, no matter which direction I do it, the arrows just don't want to work! I feel upset.

<svg class="ArrowBox" width="424px" height="100px" fill="blue"> <filter id = "i1" width = "150%" height = "150%"> <feOffset result = "offOut" in = "SourceGraphic" dx = "0" dy = "0"/> <feGaussianBlur result = "blurOut" in = "offOut" stdDeviation = "10"/> <feBlend in = "SourceGraphic" in2 = "blurOut" mode = "normal"/> </filter> <rect fill="red" x="10" y="10" width="300" height="60" filter="url(#i1)"></rect> </svg>
+4
source share
1 answer

Try <rect fill="red" x="10" y="10" width="300" height="60" filter="url(#i1)" style="-webkit-svg-shadow:0px 0px 10px red;"></rect> .

+6
source

Source: https://habr.com/ru/post/1391974/

More articles:


All Articles