SVG Elements无法在Safari中显示阴影过滤器

Question

我发现Safari和iOS Safari浏览器由于某种原因不能/不显示SVG阴影(过滤器).至少对我自己来说,阴影不会只在Safari iOS和Safari桌面上显示,它适用于chrome和firefox.

有没有办法让一个SVG元素在Safari iOS中显示阴影？该网站纯粹是为了iPad,所以这是一个重大错误

我正在绘制动态箭头,箭头可以/将具有不同的尺寸和阴影偏移.所以这就是我使用SVG元素的原因.问题是SVG阴影由于某些原因从未在Safari中显示.

这真令人沮丧.我已经去了HTML5画布画箭头,但我发现旋转是荒谬的,无论我做哪个方式箭头只是不想工作!我感到沮丧.

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

Answer 1

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