在svg上添加阴影

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

我相信这就是您想要的，您可以只更改过滤器中的值以适合您的需求。

简单地说，不是要完成的事情：