Как правильно изпользовать filter в svg sprite?

Question

[orsodev]

Всем привет, помогите разобраться с svg sprite
У меня есть файл svg

spoiler

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 97.69 105.09">
    <defs>
        <style>.f{fill:#ffc878;}.g{fill:#fc613d;}.h{filter:url(#d);}</style>
        <filter id="d" filterUnits="userSpaceOnUse">
            <feOffset dx="-2" dy="2"/>
            <feGaussianBlur result="e" stdDeviation="0"/>
            <feFlood flood-color="#000" flood-opacity=".3"/>
            <feComposite in2="e" operator="in"/>
            <feComposite in="SourceGraphic"/>
        </filter>
    </defs>
    <g id="a"/>
    <g id="b">
        <g id="c">
            <g>
                <g>
                    <path class="g"
                          d="M49.26,103.59c-3.73,0-7.42-.96-10.68-2.78l-25.45-14.22c-6.81-3.8-11.11-11.01-11.22-18.81l-.41-29.14c-.11-7.8,3.98-15.12,10.68-19.12L37.22,4.59c3.39-2.02,7.27-3.09,11.22-3.09,3.73,0,7.42,.96,10.68,2.78l25.45,14.22c6.81,3.8,11.11,11.01,11.22,18.81l.41,29.14c.11,7.8-3.98,15.12-10.68,19.12l-25.03,14.93c-3.39,2.02-7.27,3.09-11.22,3.09h0Z"/>
                    <path class="f"
                          d="M48.44,3c3.48,0,6.92,.9,9.95,2.59l25.45,14.22c6.34,3.54,10.35,10.26,10.45,17.52l.41,29.14c.1,7.26-3.71,14.09-9.95,17.81l-25.03,14.93c-3.16,1.88-6.77,2.88-10.45,2.88-3.48,0-6.92-.9-9.95-2.59l-25.45-14.22c-6.34-3.54-10.35-10.26-10.45-17.52l-.41-29.14c-.1-7.26,3.71-14.09,9.95-17.81L37.99,5.88c3.16-1.88,6.77-2.88,10.45-2.88m0-3c-4.15,0-8.3,1.1-11.99,3.3L11.42,18.23C4.24,22.51-.12,30.3,0,38.66l.41,29.14c.12,8.36,4.69,16.02,11.99,20.1l25.45,14.22c3.55,1.98,7.48,2.97,11.41,2.97,4.15,0,8.3-1.1,11.99-3.3l25.03-14.93c7.18-4.28,11.53-12.07,11.41-20.43l-.41-29.14c-.12-8.36-4.69-16.02-11.99-20.1L59.85,2.97c-3.55-1.98-7.48-2.97-11.41-2.97h0Z"/>
                </g>
                <g class="h">
                    <polygon class="f"
                             points="47.51 70.76 47.72 85.47 19.82 69.88 19.62 55.18 32.79 62.55 32.93 62.62 33.01 62.67 47.51 70.76"/>
                    <polygon class="f" points="62.33 63.21 62.54 77.91 49.92 85.44 49.71 70.73 62.33 63.21"/>
                    <polygon class="f" points="76.9 37.13 77.35 69.07 64.72 76.6 64.27 44.67 76.9 37.13"/>
                    <polygon class="f" points="75.78 35.24 63.16 42.77 50.32 35.6 62.94 28.07 75.78 35.24"/>
                    <polygon class="f"
                             points="60.72 26.83 47.58 34.67 33.29 43.18 20.45 36.02 47.89 19.65 60.72 26.83"/>
                    <polygon class="f" points="32.21 45.11 32.42 59.82 19.58 52.64 19.37 37.94 32.21 45.11"/>
                </g>
            </g>
        </g>
    </g>
</svg>

Добавляю эту иконку в svg sprite

spoiler

<svg style="position: absolute; width: 0; height: 0;" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <symbol id ="icon-pro"  viewBox="0 0 97.69 105.09">
    <g id="Calque_2">
      <g id="ICON_APP_-_Icon_Pro">
        <path class="f" fill="#fc613d"
              d="M49.26,103.59c-3.73,0-7.42-.96-10.68-2.78l-25.45-14.22c-6.81-3.8-11.11-11.01-11.22-18.81l-.41-29.14c-.11-7.8,3.98-15.12,10.68-19.12L37.22,4.59c3.39-2.02,7.27-3.09,11.22-3.09,3.73,0,7.42,.96,10.68,2.78l25.45,14.22c6.81,3.8,11.11,11.01,11.22,18.81l.41,29.14c.11,7.8-3.98,15.12-10.68,19.12l-25.03,14.93c-3.39,2.02-7.27,3.09-11.22,3.09h0Z"/>
        <path class="g" fill="#ffc878"
              d="M48.44,3c3.48,0,6.92,.9,9.95,2.59l25.45,14.22c6.34,3.54,10.35,10.26,10.45,17.52l.41,29.14c.1,7.26-3.71,14.09-9.95,17.81l-25.03,14.93c-3.16,1.88-6.77,2.88-10.45,2.88-3.48,0-6.92-.9-9.95-2.59l-25.45-14.22c-6.34-3.54-10.35-10.26-10.45-17.52l-.41-29.14c-.1-7.26,3.71-14.09,9.95-17.81L37.99,5.88c3.16-1.88,6.77-2.88,10.45-2.88m0-3c-4.15,0-8.3,1.1-11.99,3.3L11.42,18.23C4.24,22.51-.12,30.3,0,38.66l.41,29.14c.12,8.36,4.69,16.02,11.99,20.1l25.45,14.22c3.55,1.98,7.48,2.97,11.41,2.97,4.15,0,8.3-1.1,11.99-3.3l25.03-14.93c7.18-4.28,11.53-12.07,11.41-20.43l-.41-29.14c-.12-8.36-4.69-16.02-11.99-20.1L59.85,2.97c-3.55-1.98-7.48-2.97-11.41-2.97h0Z"/>
        <g class="h">
          <polygon class="g" fill="#ffc878"
                   points="47.51 70.76 47.72 85.47 19.82 69.88 19.62 55.18 32.79 62.55 32.93 62.62 33.01 62.67 47.51 70.76"/>
          <polygon class="g" fill="#ffc878" points="62.33 63.21 62.54 77.91 49.92 85.44 49.71 70.73 62.33 63.21"/>
          <polygon class="g" fill="#ffc878" points="76.9 37.13 77.35 69.07 64.72 76.6 64.27 44.67 76.9 37.13"/>
          <polygon class="g" fill="#ffc878" points="75.78 35.24 63.16 42.77 50.32 35.6 62.94 28.07 75.78 35.24"/>
          <polygon class="g" fill="#ffc878"
                   points="60.72 26.83 47.58 34.67 33.29 43.18 20.45 36.02 47.89 19.65 60.72 26.83"/>
          <polygon class="g" fill="#ffc878" points="32.21 45.11 32.42 59.82 19.58 52.64 19.37 37.94 32.21 45.11"/>
        </g>
      </g>
    </g>
  </symbol>
</svg>

В файле svg есть filter который не работает в спрайте
<spoiler title="">
<code>
   <filter id="d" filterUnits="userSpaceOnUse">
            <feOffset dx="-2" dy="2"/>
            <feGaussianBlur result="e" stdDeviation="0"/>
            <feFlood flood-color="#000" flood-opacity=".3"/>
            <feComposite in2="e" operator="in"/>
            <feComposite in="SourceGraphic"/>
        </filter>
</code></spoiler>

Стили fill добавляю в sprite инлайново, они применяются кроме .h{filter:url(#d);}

fill="#ffc878";
filter= url(#d);

Как правильно сделать чтобы эти фильтры работали?

Answer 1

[orsodev]

Может не совсем правильно задал вопрос.
Интересует есть ли возможность эти фильтры указывать в CSS?
Например

<feFlood  flood-color="#000" flood-opacity=".3"/>
<feOffset  dx="-2" dy="2"/>

в СSS

filter="drop-shadow(rgb(0 0 0 / 30%) -2px 2px 0px)"