CSS 相对剪辑路径：path（） 不起作用（整个 bg 图像不显示），代码问题出在哪里？

问：

我正在构建一个英雄元素，我试图使每个“片段”链接到不同的页面，并且由于有很多重叠，因此选择了剪辑路径而不是遮罩。下图显示了我尝试完成的任务，下面是相关代码：

英雄元素视觉对象，显示元素的每一部分

HTML & CSS：（#htl1 = 视觉中最左上角的元素，#htl2 = 最左上角的第 2 个元素，其余部分的处理方式相同）

<style>
    #hero {
        position: relative;
        display: block;
        height: 58vw;
    }

    #htl1 {
        width: 29vw;
        height: 29vw;
        top: 0;
        left: 0;
        background: url(htl1.jpg) no-repeat center center;
        background-size: cover;
        clip-path: path("M0,0 V1 L1,0 H0");
        z-index: 2;
        position: absolute;
    }

    #htl2 {
        width: 50vw;
        height: 35vw;
        top: 0;
        left: 0;
        background: url(htl2.jpg) no-repeat center center;
        background-size: cover;
        clip-path: path("M0,0.837 V1 H1 V0 H0.6 L0,0.837");
        z-index: 1;
        position: absolute;
    }
</style>

<section id="hero">
    <a href="#1" id="htl1" class="masked"></a>
    <a href="#2" id="htl2" class="masked"></a>
    <a href="#3" id="htr1" class="masked"></a>
    <a href="#4" id="htr2" class="masked"></a>
    <a href="#5" id="hbr1" class="masked"></a>
    <a href="#6" id="hbr2" class="masked"></a>
    <a href="#7" id="hbl1" class="masked"></a>
    <a href="#8" id="hbl2" class="masked"></a>
</section>

我尝试过以多种方式让它工作，但是关于这个剪辑路径过程如何工作的东西让我感到困惑。在这一点上，我想知道这是否可能，但我可能只是在这里遗漏了一些基本的东西，因为我对以这种方式使用 SVG （遮罩/剪裁）相对较新。

我使用这个相对剪辑路径转换工具将它们从 userSpaceOnUse 转换为 objectBoundingBox，因为这需要响应并始终跨越页面的整个宽度： https://yoksel.github.io/relative-clip-path/

以前，当它设置为绝对剪辑路径时（例如，我认为基于viewbox？），它确实会剪辑图像，但大小是错误的。我也尝试过在SVG文件中使用各种clipPath实现，但也没有成功。仅 CSS 解决方案（例如，path 都在 clip-path 属性中）是保持简单的理想选择。

感谢您的时间和考虑。

添加的示例：

#hero {
        position: relative;
        display: block;
        height: 58vw;
    }

    #htl1 {
        width: 29vw;
        height: 29vw;
        top: 0;
        left: 0;
        background: url(https://placehold.co/100) no-repeat center center;
        background-size: cover;
        clip-path: path("M0,0 V1 L1,0 H0");
        z-index: 2;
        position: absolute;
    }

    #htl2 {
        width: 50vw;
        height: 35vw;
        top: 0;
        left: 0;
        background: url(https://placehold.co/100) no-repeat center center;
        background-size: cover;
        clip-path: path("M0,0.837 V1 H1 V0 H0.6 L0,0.837");
        z-index: 1;
        position: absolute;
    }

<section id="hero">
    <a href="#1" id="htl1"></a>
    <a href="#2" id="htl2"></a>
</section>