Элементы SVG не могут отображать теневой фильтр в Safari

Я обнаружил, что браузеры Safari и iOS Safari по какой-то причине не могут/не отображают тени (фильтры) SVG. По крайней мере, для меня тени не будут отображаться только в Safari iOS и Safari Desktop, они работают в 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>

svg html safari webkit svg-filters
person sazr    schedule 20.01.2012    source источник
comment
Фильтры SVG поддерживались только в iOS6 (осень 2012 г.), так что они не должны были работать еще в январе 2012 года :-) Нет, вы не сошли с ума.   -  person Michael Mullany    schedule 13.01.2013

Ответы (1)


arrow_upward
6
arrow_downward

Вместо этого попробуйте <rect fill="red" x="10" y="10" width="300" height="60" filter="url(#i1)" style="-webkit-svg-shadow:0px 0px 10px red;"></rect>.

person basecode    schedule 04.05.2012
comment
Кажется, вам не хватает вступительной цитаты и имени свойства. - person Marcin; 05.05.2012
comment
Не будет ли это выглядеть неправильно в браузерах, поддерживающих фильтры svg и -webkit-svg-shadow? - person Erik Dahlström; 15.05.2013
comment
@ErikDahlström, это серьезная проблема. - person basecode; 02.07.2013
comment
Я полагаю, что тогда нет способа обойти обнаружение функций. 'SVGFilterElement' in window для обнаружения фильтров SVG и комбинацию getComputedStyle + getPropertyValue для обнаружения -webkit-svg-shadow. - person basecode; 02.07.2013
comment
-webkit-svg-shadow был недавно удален из webkit. - person dave; 25.10.2013