Почему filter (drop-shadow) вызывает исчезновение моего SVG в Safari?

Я разрабатываю приложение, используя D3.JS. Я на какое-то время отвлекся и недавно вернулся к этому. Сегодня я обнаружил, что, хотя в прошлом он работал нормально, карта SVG в приложении больше не отображается на мобильном Safari (iOS 9.3.1) или настольном Safari (v9.1 (11601.5.17.1) ).

Я извлек SVG и одно правило стиля и поместил их на CodePen, чтобы проиллюстрировать, что происходит. В Хроме эта ручка будет отлично смотреться. В Safari он будет полностью пустым.

Https://codepen.io/Kirkman/pen/pyKzeX

Если вы проверите DOM в Safari, вы обнаружите, что пути есть, и они являются правильными формами. Они просто кажутся невидимыми. Снятие флажка с правил стиля в инспекторе приводит к волшебному появлению всей карты (без тени, очевидно)

Правило стиля очень простое: 

svg {
    -webkit-filter: drop-shadow( 2px 2px 4px rgba(0,0,0,.4) );
    filter: drop-shadow( 2px 2px 4px rgba(0,0,0,.4) );
}
Может ли кто-нибудь предположить, почему это не работает? Я сделал что-то не так, или что-то изменилось в моей жизни? Сафари?
4 10
css svg safari mobile-safari css-filters

4 ответа:

Возможно, немного поздновато, но на всякий случай я оставлю вам свой ответ. У меня была та же проблема с Safari, и я понял, что это, кажется, проблема Safari/ошибка. Вы можете обойти эту ошибку, просто обернув свой SVG-тег другим HTML-тегом, например div, и применить к этому элементу фильтр drop-shadow, как это было в вашем примере. Здесь ваш пример модифицирован с помощью элемента-оболочки

Https://codepen.io/mauromjg/pen/rLaqWG 

<div class="svg-wrapper">
    <svg>...</svg>
</div>

//CSS
.svg-wrapper {
    -webkit-filter: drop-shadow( 2px 2px 4px rgba(0,0,0,.4) );
    filter: drop-shadow( 2px 2px 4px rgba(0,0,0,.4) );
}

Надеюсь, что помогает!

18

Браузеры вычисляют вещи по-разному, и по какой-то причине Safari ненавидит вас. Лол.

Однако вместо этого вы должны использовать фильтры SVG. Они гораздо надежнее.

Источник-w3schools

 <svg height="140" width="140">
  <defs>
    <filter id="f3" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f3)" />
</svg>

Надеюсь, это поможет!

1

В моем случае я использовал фильтр SVG, поэтому я не мог действительно применить решение CSS. Вместо этого я смог заставить SVG появиться, применив преобразование CSS через Javascript после загрузки страницы. Вот пример в простом JS: 

setTimeout(function(){
 document.getElementById("svg-element").style.display = "block";
},10);

Если вы хотите знать, будет ли это работать, посмотрите, появится ли SVG после изменения размера браузера или изменения правила стиля CSS с помощью инспектора.

0

У меня также был индикатор загрузки, который никогда не останавливался, чтобы вращаться, когда это происходило. Кроме того, когда SVG с тегом стиля, который задает тень, был открыт в отдельном окне, тени не было. Решение состояло в том, чтобы использовать фильтр SVG и обязательно дублировать элемент, на котором он был установлен, чтобы при изменении размера изображения мобильное safari не создавало пикселов. Например, как описано здесь https://stackoverflow.com/a/52250105/1267201

0