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

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

4 голосов
/ 20 января 2012

Я обнаружил, что браузеры 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>

1 Ответ

6 голосов
/ 05 мая 2012

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

...