Проблема с добавлением Box Shadow в SVG с помощью CSS

Question

Проблема с добавлением Box Shadow в SVG с помощью CSS

Можете ли вы взглянуть на эту демонстрацию и дать мне знать, как я могу добавить тень от тени в SVG с помощью CSS?

Я уже пробовал эти

.kiwi {
  fill: #94d31b; 
  box-shadow: 10px 10px 5px #888888;
  -webkit-filter: drop-shadow( -5px -5px 5px #000 );
  filter: drop-shadow( -5px -5px 5px #000 ); 
  -webkit-svg-shadow: 0 0 7px #53BE12;
}

но они не добавили тени к SVG

6

css css3 svg drop-shadow

Источник

user1066197 21 мар '14 в 15:00

1 ответ

Решение

Другие вопросы по тегам css css3 svg drop-shadow

user1790982 21 мар '14 в 15:11 2014-03-21 15:11 · Accepted Answer · 2014-03-21 15:11

Вы можете добавить что-то вроде следующего в ваш svg:

<filter id="drop-shadow">
  <feGaussianBlur in="SourceAlpha" stdDeviation="2.2"/>
  <feOffset dx="1" dy="4" result="offsetblur"/>
  <feFlood flood-color="rgba(0,0,0,0.3)"/>
  <feComposite in2="offsetblur" operator="in"/>
  <feMerge>
    <feMergeNode/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>

и затем используйте следующие стили:

.kiwi {
  fill: #94d31b; 
  -webkit-filter: drop-shadow(0 1px 10px rgba(113,158,206,0.8));
  filter: url(#drop-shadow);
}

пример