Размытие по Гауссу SVG в Safari неожиданно осветляет изображение

Использование фильтра svg guassian blur для размытия изображений в разных браузерах. В целом, это работает очень хорошо, за исключением случая с Safari.

В настольном Safari изображение размыто, но также и осветлено. Этого не происходит ни в одном другом браузере (буквально проверено в Firefox, Chrome, IE9-11 и мобильном Safari в iOS 7).

Вот jsfiddle, демонстрирующий фильтр svg в реальном времени, и связанный скриншот того, что видит Safari, http://jsfiddle.net/vtDYg/3/

Здесь также используется текущий код svg:

<svg class="sg-blur-2">
  <defs>
    <filter id="sg-blur-2">
      <feGaussianBlur stdDeviation="2"></feGaussianBlur>
    </filter>
  </defs>
  <image xlink:href="http://fillmurray.com/300/100" width="100%" height="100%" filter="url(#sg-blur-2)"></image>
</svg>

Вот что видит Safari на рабочем столе: введите здесь описание изображения

Я подумал, что цветовое пространство рассматриваемого jpeg может быть проблемой, поэтому я указал атрибут «color-profile» для «sRGB», «RGB» и «rgb», но это не имело никакого эффекта.


svg safari gaussian svg-filters
person Geuis    schedule 18.06.2014    source источник
comment
Указывает ли разные значения для фильтров интерполяции цветов (w3.org/TR/SVG /painting.html#ColorInterpolationFiltersProperty) имеет какое-либо значение для Safari? Если нет, то он может работать в неправильном цветовом пространстве.   -  person Robert Longson    schedule 19.06.2014
comment
@RobertLongson Пожалуйста, добавьте это в качестве ответа, чтобы я мог принять его, проголосовать за него и позолотить. Это сработало ТОЧНО.   -  person Geuis    schedule 19.06.2014
comment
возможный дубликат Safari отображает неправильные цвета при использовании фильтра размытия   -  person Michael Mullany    schedule 19.06.2014

Ответы (2)


arrow_upward
9
arrow_downward

Кажется, что вы можете исправить или, по крайней мере, улучшить ситуацию, установив в фильтре color-interpolation-filters="sRGB".

feGaussianBlur должен работать в цветовом пространстве linearRGB с предварительно умноженным RGBA по умолчанию с фильтрами интерполяции цветов, позволяющими переключать его на sRGB. Это, безусловно, относится к Firefox, так как я написал код для этого.

person Robert Longson    schedule 18.06.2014
comment
Мне любопытно об этом. После того, как я прочитал часть спецификации, на которую вы ссылались, мне пришло в голову, что на первый взгляд кажется, что каждый браузер, кроме настольного Safari 7, по умолчанию использует sRGB, а не linearRGB. У меня нет глубокого понимания этого. - person Geuis; 19.06.2014
comment
Я не верю, что это правда. Реализация linearRGB в Safari не работает. LinearRGB правильно поддерживается по умолчанию для фильтров SVG в других браузерах. - person Michael Mullany; 19.06.2014
comment
Там определенно что-то не так. Я подал отчет об ошибке. - person David Bonnet; 31.08.2014
comment
@RobertLongson - к сожалению, я все еще вижу освещение в Safari, вот пример страницы: codepen.io/jonathan /pen/GJPjjQ Есть идеи? Спасибо! - person 2507rkt3; 07.03.2018
comment
@jbenjohnson Safari — это приложение с открытым исходным кодом, скачайте его и исправьте ошибку, обнаруженную Дэвидом Боннетом, или заплатите кому-нибудь за это. - person Robert Longson; 07.03.2018

arrow_upward
4
arrow_downward

Ответ, рекомендованный @RobertLongson в первом комментарии, требует атрибута color-interpolation-filters="sRGB" для фильтра feGaussianBlur.

http://jsfiddle.net/vtDYg/6/

<svg class="sg-blur-2">
  <defs>
    <filter id="sg-blur-2">
      <feGaussianBlur stdDeviation="2" color-interpolation-filters="sRGB"></feGaussianBlur>
    </filter>
  </defs>
  <image xlink:href="http://fillmurray.com/300/100" width="100%" height="100%" filter="url(#sg-blur-2)"></image>
</svg>

Насколько мне известно, спецификация svg указывает, что фильтр feGaussianBlur по умолчанию должен использовать цветовое пространство linearRGB. Все браузеры, кроме Safari 7, похоже, делают это неправильно и по умолчанию используют sRGB. Как ни странно, мобильный Safari также по умолчанию использует sRGB.

person Geuis    schedule 18.06.2014