Свойство тени SVG logo не работает в IE - PullRequest
Новая
       11

Свойство тени SVG logo не работает в IE

0 голосов
/ 26 октября 2018

Свойство Drop Shadow для логотипа SVG, не работающего в IE, но работающего в Chrome.

Я использовал это: 

filter:drop-shadow(0px 0px 2px #a2a2a2);
-ms-filter:drop-shadow(0px 0px 2px #a2a2a2);
-webkit-filter:drop-shadow(0px 0px 2px #a2a2a2);

1 Ответ

0 голосов
/ 27 октября 2018

Фильтр SVG, эквивалентный drop-shadow(), равен , описанному здесь .

Итак, ваш будет: 

<filter id="drop-shadow">
  <feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
  <feOffset dx="0" dy="0" result="offsetblur"/>
  <feFlood flood-color="#a2a2a2"/>
  <feComposite in2="offsetblur" operator="in"/>
  <feMerge>
    <feMergeNode/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>

Поместите это в свой SVG и обратитесь к нему, используя filter="url(#drop-shadow)" или filter url(#drop-shadow).

Вот рабочий пример. Поскольку ваши смещения равны 0, вы можете немного упростить это ... 

<svg width="200" height="200">
  <defs>
    <filter id="drop-shadow">
      <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"/>
      <feFlood flood-color="#a2a2a2"/>
      <feComposite in2="blur" operator="in"/>
      <feMerge>
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>

  <rect x="50" y="50" width="100" height="100" fill="white" filter="url(#drop-shadow)"/>
</svg>
...