Тень падения SVG используя css3

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

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

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

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE HTML><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head> 
<style type="text/css" media="screen">  
    svg .shadow { cursor:crosshair; 
            -moz-box-shadow: -5px -5px 5px #888;
            -webkit-box-shadow: -5px -5px 5px #888;
            box-shadow: -5px -5px 5px #888; }   
</style>
</head>
<body>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<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>
</body>
</html>
247
css css3 html5 svg svg-filters

5 ответов

здесь пример применения dropshadow к некоторым svg с помощью свойства "filter". Если вы хотите контролировать непрозрачность dropshadow, посмотрите на . The slope атрибут управляет тем, сколько непрозрачности давать тени.

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

<filter id="dropshadow" height="130%">
  <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> <!-- stdDeviation is how much to blur -->
  <feOffset dx="2" dy="2" result="offsetblur"/> <!-- how much to offset -->
  <feComponentTransfer>
    <feFuncA type="linear" slope="0.5"/> <!-- slope is the opacity of the shadow -->
  </feComponentTransfer>
  <feMerge> 
    <feMergeNode/> <!-- this contains the offset blurred image -->
    <feMergeNode in="SourceGraphic"/> <!-- this contains the element that the filter is applied to -->
  </feMerge>
</filter>
<circle r="10" style="filter:url(#dropshadow)"/>

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

267

используйте новый CSS filter собственность.

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

вы можете использовать этот polyfill это будет поддерживать FF

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

.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 будет:

<img src="my-svg-graphic.svg" class="shadow">

<!-- Or -->

<svg class="shadow" ... >
    <rect x="10" y="10" width="100" height="50" fill="#c66" />
</svg>

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

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

Обратите Внимание: этот подход работает только тогда, когда класс находится на элемент. Ты можешь!--32-->не используйте это на встроенном элементе svg, таком как <rect>.

<!-- This will NOT work! -->
<svg><rect class="shadow" ... /></svg>

подробнее о CSS фильтры на html5rocks.

349

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

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

Я не знаю решения только для CSS.

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

3

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

<filter id="shadow" x="0" y="0" width="200%" height="200%">
  <feDropShadow dx="40" dy="40" stdDeviation="35" flood-color="#ff0000" flood-opacity="1" />
</filter>
-2