CSS相对clip-path: path()失效（背景图未完整显示），代码问题在哪？

我正在构建一个Hero元素，希望每个区块可链接至不同页面，因存在大量重叠，选择使用clip-path而非masking。目标效果为一个被分割成多个不规则重叠区块的Hero区域，每个区块对应独立链接。

以下是相关代码（#htl1为视觉中最左上元素，#htl2为左上次元素，其余区块命名规则相同）：

<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的masking/clipping用法，尝试了多种方法但仍对clip-path的工作原理有不解之处，怀疑存在基础疏漏。为实现响应式全屏效果，我使用相对clip-path转换工具将路径从userSpaceOnUse转换为objectBoundingBox。此前使用基于viewbox的绝对clip-path可实现裁剪，但尺寸异常；尝试SVG内的clipPath实现也未成功，希望找到纯CSS解决方案。目前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>

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