Большие размытия в фильтрах SVG не работают в Safari

Я уже некоторое время использую следующий фильтр SVG вместо filter: blur(#px);, так как мне нужно размытие, которое покрывает элемент от края до края, а не обычное падение. Он прекрасно работает в Chrome как на рабочем столе, так и на Android.

Веб-кит Safari, с другой стороны, имеет множество проблем с ним. Я экспериментировал с удалением и корректировкой feColorMatrix и feComposite, но результаты ухудшаются.

Я искал альтернативы, но я пришел совершенно сухой.

<filter id="ultraBlur" width="150%" height="150%" x="-25%" y="-25%" color-interpolation-filters="sRGB">
    <feGaussianBlur stdDeviation="70"></feGaussianBlur>
    <feColorMatrix type="matrix" values="1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 9 0"></feColorMatrix>
    <feComposite in2="SourceGraphic" operator="in"></feComposite>
</filter>

как показано в Chrome

как показано в Chrome

отрендерено Safari WebKit

как показано Safari WebKit


svg css svg-filters
person Tom Chapman    schedule 17.02.2018    source источник

Ответы (1)


arrow_upward
9
arrow_downward

Вы столкнулись с эвристикой управления памятью webkit. Из экспериментов - максимальный размер размытия за один проход составляет stdDeviation 45 на моем образце изображения - больше, чем это, и webkit уменьшает изображение (для экономии памяти - это огромное размытие).

Хорошо - у вас есть два варианта.

  1. Заставьте webkit НЕ уменьшать изображение, добавив «filterRes = «1200» к элементу фильтра.
  2. Разделите размытие на два этапа, чтобы получить тот же эффект.

Я рекомендую стратегию № 2 — потому что filterRes теперь устарел и работает только в iOS/Safari (потому что Apple не поспевает за последними вещами SVG). Следующее отлично работает в iOS/Safari.

<svg width="800px" height="600px">
  <defs>
  <filter id="ultraBlur" width="150%" height="150%" x="-25%" y="-25%" color-interpolation-filters="sRGB">
    <feGaussianBlur stdDeviation="45"/>
    <feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0 0 0 0 10 0"/>
    <feGaussianBlur stdDeviation="45"/>
     <feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0 0 0 0 10 0"/>
    <feComposite in2="SourceGraphic" operator="in"></feComposite>
</filter>
  </defs>
  <image filter="url(#ultraBlur)" x="0" y="0" width="700" height="400" xlink:href="https://upload.wikimedia.org/wikipedia/commons/5/5b/Paris-sunset-panoramic.jpg" preserveAspectRatio="xMidYMid slice"/>
</svg>

person Michael Mullany    schedule 21.02.2018