Как применить фильтр тени с помощью CSS к определенному элементу/пути SVG

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

.shadow {
  fill: red;
  
  -webkit-filter: 
    drop-shadow( 3px 3px 2px rgba(0,0,0,.7) );
          filter: 
    drop-shadow( 3px 3px 2px rgba(0,0,0,.7) );
}

  <svg height="150" width="150">
    <g>
<path d="M0,0 C-72,132 -72,-26 100,100"></path>
    </g>
    <g class="shadow" >
    <circle class="shadow" cx="100" cy="100" r="20"></circle>
    </g>
  </svg>

Ответ 1

Вы можете применять тень выборочно, делая выбор цвета на объекте, который вы хотите теневой, создаете тень и затем объединяете ее под оригинальной графикой. Но вы должны сделать это через фильтр SVG-фильтра в CSS Filters - который не работает в IE. (Итак, хакерский, но возможно)

Spec здесь: w3.org/TR/SVG11/filters.html#feColorMatrixElement

Демо-игрушка здесь:
https://beta.observablehq.com/@gitmullany/filter-effects-using-svg-color-matrices

Эта матрица удваивает непрозрачность всех красных значений, выравнивает непрозрачность всего остального, а затем вычитает 1. Эффект заключается только в том, чтобы оставить объекты со 100% непрозрачностью, которые являются rgb (255,0,0)

#mySVG {
   filter: url(#selective-shadow);
}

.shadow {
  fill: red;
}

<svg>
 <defs>
   <filter id="selective-shadow">
     <feColorMatrix type="matrix" values="0 0 0 0 0 
                                          0 0 0 0 0
                                          0 0 0 0 0 
                                          2 0 0 0 -1"/>
     <feGaussianBlur stdDeviation="3"/>
     <feOffset dy="2" dx="2"/>
     <feMerge>
       <feMergeNode/>
       <feMergeNode in="SourceGraphic"/>
     </feMerge>         
   </filter>
 </defs>
</svg>



<svg height="150" width="150" id="mySVG">
    <g>
<path d="M0,0 C-72,132 -72,-26 100,100"></path>
    </g>
    <g class="shadow" >
    <circle class="shadow" cx="100" cy="100" r="20"></circle>
    </g>
  </svg>

Ответ 2

Обновлено 2018-03:. Я сделал несколько экспериментов по этой проблеме, потому что я тоже не мог найти никакой информации об этом, и результаты довольно противоречивы. Версия TL; DR, если вы собираетесь использовать polyfill или просто сделать dropshadow в SVG.

Эксперимент Кодепена: http://codepen.io/staypuftman/pen/GoNoMq

Chrome 65 + Canary 67:

Ни Chrome, ни ребра Canary не уважают filter или -webkit-filter правильно в контексте всплывающей тени объекта SVG, но работают с простым div.

Firefox 58/Quantum + Firefox 53:

Выглядит неплохо как для SVG, так и для HTML-объектов.

Safari 10.1 +

Safari исправил эту проблему в серии 10.1 (и, возможно, 10.0).

Safari 9.x

SVG CSS dropshadow не отображается, а div dropshadow имеет меньшую непрозрачность по какой-либо причине

IE11

Ничего.