Добавить тень на SVG <path>

Question

Я пытаюсь нанести современную тень на определенную часть SVG.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 162 63.25">
  <g style="isolation:isolate">
    <g>
      <g>
        <path d="M149.376,39.75l-49,23.5v-47Z" fill="#811818"/>
        <path d="M149.376,39.75H6.688L30.279,22.274,6.624,4.75H149.376Z" fill="#b51c1c"/>
      </g>
    </g>
  </g>
</svg>

Я пытался использовать фильтр, но края видны и он слишком размытый:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 162 63.25">
  <g style="isolation:isolate">
    <g>
      <g>
        <filter id="dropshadow" x="-2" y="-2" width="200" height="200">
          <feGaussianBlur stdDeviation="1"/>
        </filter>
        <path d="M149.376,39.75l-49,23.5v-47Z" fill="#811818"/>
        <path style="stroke: rgba(0,0,0,0.19); stroke-width: 0.2; filter: url('#dropshadow');" d="M149.376,39.75H6.688L30.279,22.274,6.624,4.75H149.376Z" fill="#b51c1c"/>
      </g>
    </g>
  </g>
</svg>

Я ожидаю использовать некоторые современные css тени, такие как (https://codepen.io/sdthornton/pen/wBZdXq) и не обрезать исходный svg. Я также рассчитываю использовать меньше теней поверх него

Answer 1

Я считаю, что это то, что вы хотите, вы можете просто изменить значения в фильтре в соответствии с вашими потребностями.

простыми словами, а не для того, чтобы завершить задачу:

feOffset : x, y для перемещения эффекта размытия тени вперед и назад. фильтр : высота для перемещения вверх и вниз

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 169 67.25">
  <g style="isolation:isolate">
    <g>
      <g>
        <defs>
          <filter id="dropshadow" height="122%">
            <feGaussianBlur in="SourceAlpha" stdDeviation="1" /> 
            <feOffset in="blur" dx="0.7" dy="0.7" result="offsetBlur"/>
            <feOffset dx="1" dy="1" result="offsetblur" />
            <feFlood flood-color="#3D4574" flood-opacity="0.3" result="offsetColor"/>
            <feComposite in="offsetColor" in2="offsetBlur" operator="in" result="offsetBlur"/>
          </filter>
        </defs>
        <use xlink:href="#path1" filter="url(#dropshadow)"></use>
        <path id="path1" d="M149.376,39.75l-49,23.5v-47Z" fill="#811818"/>
        <use xlink:href="#path2" filter="url(#dropshadow)"></use>
        <path id="path2" style="stroke: rgba(0,0,0,0.19); stroke-width: 0.2;" d="M149.376,39.75H6.688L30.279,22.274,6.624,4.75H149.376Z" fill="#b51c1c"/>
		    
      </g>
    </g>
  </g>
</svg>

Answer 2

Вместо использования специального фильтра SVG вы можете легко достичь ожидаемого результата, используя стандартный CSS фильтр теней

ie: filter: drop-shadow(0 0 2px rgba(0,0,0,.5));

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 162 63.25">
  <g style="isolation:isolate">
    <path d="M149.376,39.75l-49,23.5v-47Z" fill="#811818"/>
    <path style="stroke: rgba(0,0,0,0.19); stroke-width: 0.2; filter: drop-shadow(0 0 2px rgba(0,0,0,.5));" d="M149.376,39.75H6.688L30.279,22.274,6.624,4.75H149.376Z" fill="#b51c1c"/>
  </g>
</svg>