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

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

я извлек SVG и одно правило стиля и поместил их в CodePen, чтобы проиллюстрировать, что происходит. В Chrome, эта ручка будет выглядеть прекрасно. В 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) );
}

может ли кто-нибудь предположить, почему это не работает? Я сделал что-то не так, или что-то изменилось в сафари?

10
css css-filters mobile-safari safari svg

4 ответов

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

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