如何仅为footer元素顶部区域应用SVG遮罩，避免过度遮罩？

我需要给带有渐变背景的footer元素的顶部100像素区域应用SVG遮罩，实现渐变的平滑过渡效果，但当前设置后，SVG内非有色区域以及SVG范围外的footer部分都被遮罩隐藏了，不确定当前实现方式是否正确。

元素代码 #

<footer class="footer">

</footer>

样式代码 #

.footer {
    position: relative;
    background-image: linear-gradient(60deg, #29323c 0%, #485563 100%); 
    height: 200px;

    -webkit-mask-image: url('@/../public/SVG/AutomationLanscape.svg');
    mask-image: url('@/../public/SVG/AutomationLanscape.svg');
    -webkit-mask-size: 1000px auto; 
    mask-size: 1000px auto; 
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat; 
    mask-position: top;
}

补充说明 #

• 灰色为网页背景，与footer无关
• 红色为SVG的尺寸范围
• 蓝色为我不想被遮罩的区域

预期效果是让景观图案从footer顶部区域凸显出来，footer下方区域保持完整的渐变背景。

效果对比 #

当前带遮罩的footer效果：

不带遮罩的footer效果：

内容的提问来源于stack exchange，提问作者Mads Gadeberg