如何在使用自定义SVG形状蒙版的图像上添加嵌入阴影？

Question

我尝试了许多不同的方法，包括使用背景图片；玩过滤器，如果只允许使用inset关键字，则效果很好；并尝试对仅是阴影的第二个自定义SVG进行分层。

还有其他想法吗？

HTML

<div className="Hero-image masked-image">
   <img
      src={MainStreet}
   />
</div>

CSS

.masked-image {
   mask-image: url(../images/blob.svg);
}

Hero-image {
   box-shadow: inset 3px 3px 10px rgba(0, 0, 0, 0.9);

   img {
      position: relative;
      z-index: -2;
   }
}

xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="926px" height="687px">
<defs>
<filter id="Filter_0">
    <feOffset in="SourceAlpha" dx="0" dy="10" />
    <feGaussianBlur result="blurOut" stdDeviation="3.162" />
    <feFlood flood-color="rgb(23, 42, 38)" result="floodOut" />
    <feComposite operator="out" in="floodOut" in2="blurOut" result="compOut" />
    <feComposite operator="in" in="compOut" in2="SourceAlpha" />
    <feComponentTransfer><feFuncA type="linear" slope="0.21"/></feComponentTransfer>
    <feBlend mode="multiply" in2="SourceGraphic" />
</filter>

</defs>
<g filter="url(#Filter_0)">
<path fill-rule="evenodd"  fill="rgb(0, 0, 0)"
d="M282.349,3.575 C411.423,11.120 520.302,32.533 598.697,60.279 C678.375,88.326 727.570,122.705 766.910,163.119 C806.028,203.257 835.096,248.633 861.432,295.625 C886.801,342.755 909.108,391.135 913.279,440.006 C920.296,488.397 906.195,531.132 875.275,568.960 C844.518,606.426 796.544,639.258 742.851,657.569 C689.439,676.508 631.492,681.104 571.415,677.406 C511.072,673.731 448.004,662.763 380.807,649.302 C315.460,635.230 254.022,623.396 204.315,613.490 C154.414,603.307 116.131,594.918 91.621,581.269 C66.762,567.959 55.713,548.399 56.909,521.311 C57.739,494.330 71.517,461.223 86.748,424.260 C100.787,387.521 114.203,353.239 108.766,312.171 C104.568,271.649 81.516,224.340 51.223,174.164 C22.636,124.270 -6.617,73.353 26.009,40.844 C41.630,24.532 73.145,12.973 118.122,6.853 C162.779,0.662 220.899,-0.091 282.349,3.575 "/>
</g>
</svg>