SVG元素无法在Safari中显示阴影过滤器 [英] SVG Elements cannot show shadow filter in Safari

问题描述

我发现Safari& iOS Safari浏览器出于某种原因无法/不会显示SVG阴影（过滤器）。至少对我自己来说，阴影不会只显示在Safari iOS& Safari桌面，它可以在Chrome浏览器中运行。 firefox。

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.

有没有办法让Safari浏览器iOS中的SVG元素显示阴影？该网站纯粹是为iPad，所以这是主要错误

我绘制动态箭头，箭头可以具有不同的尺寸&影子偏移。所以这就是我使用SVG元素的原因。问题是SVG阴影从不出现在Safari中。出于某种原因。

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.

这真令人沮丧。我已经去HTML5画布的箭头，但我发现旋转是荒谬的，无论我怎样做这个箭头只是不想工作！我感到沮丧。

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>

推荐答案

试试< rect fill =redx =10y =10width =300height =60filter =url（＃i1）style = - webkit-svg-shadow：0px 0px 10px red;> ;< / rect> 。

这篇关于SVG元素无法在Safari中显示阴影过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！