CODEWITHSUNDEEP
htmlsafarisvgwebkitsvg-filters
sazr
sazr

Reputation: 25928

SVG Elements cannot show shadow filter in Safari

I have found that Safari & iOS Safari browsers cannot/don't show SVG shadows(filters) for some reason. At least for myself the shadows will not show only in Safari iOS & Safari Desktop, it works in chrome & firefox.

Is there a way to get a SVG element to show a shadow in Safari iOS? The website is purely for iPad so this is major error

I am drawing dynamic arrows, the arrows can/will have different dimensions & shadow offsets. So this is why I am using SVG elements. The problem is that SVG shadows never show in Safari for some reason.

This is really frustrating. I have gone to HTML5 Canvas's to draw arrows but I am finding the rotation is ridiculous, not matter which way I do this the arrows just dont want to work! I feel frustrated.

<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>

Upvotes: 4

Views: 4020

Answers (1)

basecode
basecode

Reputation: 1510

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

Upvotes: 6

Related Questions