Можно ли установить тень для элемента 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;
} <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" viewBox="0 0 120 70">
<rect class="shadow" x="10" y="10" width="100" height="50" fill="#c66" />
</svg>
html
css
svg
svg-filters
BSR
источник
источник
slopeатрибут, чтобы настроить, какую непрозрачность вы хотите.Используйте
новоеfilterсвойство CSS .Поддерживается браузерами webkit , Firefox 34+ и Edge .
Вы можете использовать этот polyfill, который будет поддерживать FF <34, IE6 +.
Вы бы использовали это так:
Этот подход отличается от
box-shadowэффекта тем, что он учитывает непрозрачность и не применяет эффект падающей тени к блоку, а скорее к углам самого элемента svg.Обратите внимание : этот подход работает только тогда, когда класс размещен только на
<svg>элементе. Вы НЕ можете использовать это для встроенного элемента SVG, такого как<rect>.Узнайте больше о фильтрах CSS на html5rocks .
источник
Вы можете легко добавить эффект drop-shadow к svg-элементу, используя CSS-функцию drop-shadow () и значения цвета rgba. Используя значения цвета rgba, вы можете изменить непрозрачность вашей тени.
источник
Самый простой способ, который я нашел, это с
feDropShadow. Я никогда не вернусь к использованию тех невероятно эзотерических имен тегов фильтров, которые я не понимаю.источник
filter:url(#shadow)к элементу, который вы хотите иметь тень (#shadowэто идентификаторfilterтега). Например<path d="..." style="filter:url(#shadow)"/>. Может быть, вы должны добавить это к своему ответу.Я не знаю о решении только для CSS.
Как вы упомянули, фильтры - это канонический подход к созданию эффектов тени в SVG. Спецификация SVG включает пример этого.
источник
-webkit-filter: drop-shadow()это путь идти наверняка. Смотрите ответ от @hitautodestruct.Removed: Filter Effects This chapter is no longer part of the SVG specification!!Черный текст с белой тенью
Другой способ, который я использовал для белой тени (для текста): создать клон для тени:
Примечание : это требуется
xmlns:xlink="http://www.w3.org/1999/xlink"при декларации SVG.Реальное значение текста находится в
<defs>разделе, с позицией и стилем, но безfillопределения.Текст клонируется два раза: сначала для тени, а затем для самого текста.
Более удаленная тень с наибольшим значением в качестве отклонения размытия :
Вы можете использовать этот же подход с обычными объектами SVG.
С тем же требованием: без определения заполнения в
<defs>разделе !источник
flood-color?Blurиспользуется, чтобы тень выглядела немного размытой. Смотрите мою вторую текстовую версиюMore distant shadow...(только что добавлена)Вероятно, эволюция, кажется, что встроенные фильтры CSS работают хорошо на элементах, определенным образом.
Объявление фильтра css-shadow в элементе svg как в классе, так и во встроенном НЕ работает, как указано ранее.
Но, по крайней мере, в Firefox, со следующим волшебством:
После объявления DOM добавление объявления фильтра в строке с javascript .
источник