SVG元素在Safari中不能显示阴影滤镜

Question

我发现Safari和iOS Safari浏览器出于某种原因无法显示SVG阴影（过滤器）。至少对于我来说，在Safari iOS和Safari桌面版中仅会显示不会显示阴影，但在Chrome和Firefox中可以。是否有办法让SVG元素在Safari iOS中显示阴影？网站专门用于iPad，因此这是一个重大错误。

我正在绘制动态箭头，箭头可能具有不同的尺寸和阴影偏移量。所以我使用SVG元素。问题是由于某种原因SVG阴影在Safari中从未显示过。这真的很令人沮丧。我已经转向HTML5 Canvas来画箭头，但我发现旋转方式可笑，无论我怎么做这些箭头都不想工作！我感到沮丧。

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

- sazr

---

SVG滤镜仅在iOS6（2012年秋季）中得到支持，因此在2012年1月之前不应该起作用 :-) 不，你并不疯狂。 - Michael Mullany

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>替代。

- basecode

---

您似乎缺少一个开头引号和属性名。 - Marcin

在支持svg滤镜和-webkit-svg-shadow的浏览器中，这样做不会显得很奇怪吗？ - Erik Dahlström

@ErikDahlström 这是一个合理的担忧。 - basecode

我想，没有绕过特性检测的方法了。使用 'SVGFilterElement' in window 来检测 SVG 滤镜，以及结合 getComputedStyle 和 getPropertyValue 来检测 "-webkit-svg-shadow"。 - basecode

-webkit-svg-shadow 最近已从 Webkit 中移除。 - dave