Отбрасывание SVG с помощью css3

Можно ли установить тень для элемента svg с помощью css3, что-то вроде

box-shadow: -5px -5px 5px #888; -webkit-box-shadow: -5px -5px 5px #888; 

Я заметил некоторые замечания о создании тени с использованием эффектов фильтра. Есть ли пример использования CSS. Ниже приведен рабочий код, в котором стиль cusor правильно применяется, но нет эффекта тени. Пожалуйста, помогите мне получить эффект тени с наименьшим количеством кода.

     svg .shadow { cursor:crosshair; -moz-box-shadow: -5px -5px 5px #888; -webkit-box-shadow: -5px -5px 5px #888; box-shadow: -5px -5px 5px #888; }          

    Ниже приведен пример применения dropshadow к некоторому svg с использованием свойства filter. Если вы хотите контролировать непрозрачность dropshadow, посмотрите на этот пример . Атрибут slope определяет, насколько непрозрачность дает dropshadow.

    Соответствующие биты из примера:

                      

    Box-shadow определен для работы с полями CSS (read: rectangles), в то время как svg немного выразительнее, чем просто прямоугольники. Прочтите SVG Primer, чтобы узнать немного больше о том, что вы можете сделать с фильтрами SVG.

    Используйте новое свойство filter CSS.

    Поддерживается браузерами webkit , Firefox 34+ и Edge .

    Вы можете использовать этот полиполк, который будет поддерживать FF <34, IE6 +.

    Вы бы использовали его так:

     .shadow { /* Use -webkit- only if supporting: Chrome < 54, iOS < 9.3, Android < 4.4.4 */ -webkit-filter: drop-shadow( -5px -5px 5px #000 ); filter: drop-shadow( -5px -5px 5px #000 ); } 

    И ваш html будет:

          

    Этот подход отличается от эффекта box-shadow тем, что он учитывает непрозрачность и не применяет эффект тени к ящику, а скорее к углам самого элемента svg.

    Здесь вы можете увидеть живой пример .

    Обратите внимание : этот подход работает только тогда, когда class помещается только в элемент . Вы не можете использовать это для встроенного элемента svg, такого как .

       

    Подробнее о фильтрах css на html5rocks .

    Итак, как упоминалось в скрытых комментариях принятого ответа Лоренцо Полидори, самый простой вариант, который работает для меня в Chrome (и я уверен, что другие браузеры Webkit):

     -webkit-svg-shadow: 0 0 7px #53BE12; 

    Я не знаю о CSS-единственном решении.

    Как вы упомянули, фильтры – это канонический подход к созданию эффектов тени в SVG. Спецификация SVG включает в себя пример этого: http://www.w3.org/TR/SVG/filters.html#AnExample

    Самый простой способ я нашел с помощью feDropShadow . Я никогда не вернусь к использованию этих невероятно эзотерических имен тегов фильтра, которые я не понимаю.

        
    Давайте будем гением компьютера.