SVG с размытой тенью в мобильном браузере

Я изо всех сил пытаюсь заставить работать значки SVG с тенью на как можно большем количестве платформ.

Для этого я использую следующий простой CSS:

.test{
  width: 14px;
  height: 14px;
  background-image: url("../images/test.svg");
  background-repeat: no-repeat;
  opacity: 0.8;
  -webkit-filter: drop-shadow(1px 1px 0px #E0E0E0);
}

В настольных браузерах, таких как Chrome, Firefox и IE, все работает хорошо. Но в мобильном браузере начинаются проблемы: в Chrome значок становится размытым, а в Firefox тень просто игнорируется. При удалении тени значок снова станет четким в Chrome, поэтому я думаю, что у него есть что-то общее с тенью.

У кого-нибудь была такая же проблема и, возможно, нашел решение для этого?


svg css blurry drop-shadow
person user1786096    schedule 17.08.2014    source источник
comment
Сообщите об ошибке на странице crbug.com, включая тестовый пример и дополнительные сведения о том, на какие версии она влияет.   -  person Erik Dahlström    schedule 18.08.2014
comment
Я только что наткнулся на ту же проблему, хотя никто не знает об этом, хотя...   -  person Moritz Friedrich    schedule 10.02.2015
comment
Да, я удивлен отсутствием информации об этой ошибке, тем более, что она была отмечена несколько лет назад..!?   -  person 00-BBB    schedule 04.02.2020

Ответы (1)


arrow_upward
5
arrow_downward

Только что нашел ответ на этот вопрос.
Эта проблема возникает из-за того, как генерируются фильтры SVG: перед применением фильтра создается растровое изображение соответствующего элемента, которое затем обрабатывается и накладывается сверху. Отличное объяснение можно найти здесь.

Чтобы изображения SVG отображались четко на экранах HDPI, вы можете попробовать использовать свойство filterRes для effect, которое обеспечивает разрешение в пикселях для расчетных эффектов SVG, подробнее об этом здесь.
Используйте его следующим образом:

<filter id="dropshadow" height="170%" filterRes="200">
  <feGaussianBlur in="SourceAlpha" stdDeviation="20"/>
  <feOffset dx="0" dy="2" result="offsetblur"/>
  <feMerge> 
    <feMergeNode/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>
<path id="icon" fill="#fff" style="filter:url(#dropshadow)" d="..."></path>
</svg>

Скажем, вы добавили background-size: contain в свой css - нарисованный контейнер предположительно будет 14px x 14px. Чтобы отрисовать тень с разрешением, достаточным для дисплеев сетчатки (например, с коэффициентом 2), вы должны выбрать правильное значение 30 для filterRes. Это не идеально, но похоже, что это единственная работающая альтернатива на данный момент. Вид побеждает причину использования svg вообще.

person Moritz Friedrich    schedule 09.02.2015
comment
На меня это не влияет, сафари 12.1.1. filterRes теперь устарел developer.mozilla.org/en-US/ docs/Web/SVG/Attribute/filterRes - person 00-BBB; 04.02.2020