Javascript 动画SVG掩码擦除

下面是我试图完成的CSS/JS/SVG动画的故事板。两个三角形遮罩从任意一侧进入，然后相交，形成负遮罩：

三角形相交的地方是比较棘手的地方。当我将panel 4的掩码导出到SVG时，它如下所示：

<svg width="416px" height="289px" viewBox="0 0 416 289" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <path d="M211.503681,65.6626347 L507.009604,-138.787586 L507.009604,425.787586 L211.507182,221.339788 L-84,425.792431 L-84,-138.787586 L211.503681,65.6626347 Z M211.503681,65.6626347 L99,143.5 L211.507182,221.339788 L324.01001,143.502422 L211.503681,65.6626347 Z" id="path-1"></path>
    </defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect id="Rectangle-1-Copy-3" fill="#F6A623" x="0" y="0" width="416" height="289"></rect>
        <mask id="mask-2" fill="white">
            <use xlink:href="#path-1"></use>
        </mask>
        <use id="Combined-Shape" fill="#000000" xlink:href="#path-1"></use>
        <rect id="Rectangle-1-Copy-2" fill="#4990E2" mask="url(#mask-2)" x="0" y="0" width="416" height="289"></rect>
    </g>
</svg>

看起来它基本上画了两个形状，中间的负空间菱形遮罩和其余的外部三角形

因此，静态掩码本身似乎可以使用SVG，但我不知道如何设置它的动画。是否有一个库可以简化这种SVG转换/过渡，或者有一个奇特的数学方程可以动态计算路径

---

还是我完全错误地看待这个问题，有一种更简单的方法可以做到这一点？

因此，解决方案是让它更简单，也更复杂

我需要三层，而不是用一个遮罩覆盖两层。一层位于底部，显示在第一个遮罩后面，第二层由传入的三角形遮罩，第三层位于上面，复制到第一层，其中应用了菱形遮罩

<svg width="500" height="300" viewbox="0 0 500 300">
    <defs>
        <clipPath id="triangles">
            <path id="left" d="M-250,-150 L250,150 L-250,450 Z" fill="black" />
            <path id="right" d="M250,150 L750,-150 L750,450 Z" fill="black" />
        </clipPath>

        <clipPath id="diamond">
            <path id="diamond-path" d="M250,0 L500,150 L250,300 L0,150 Z" fill="black" />
        </clipPath>
    </defs>

    <!-- bottom -->
    <g id="bottom">
        <rect fill="darkorange" x="0" y="0" width="500" height="300" />
        <text x="50%" y="65%" text-anchor="middle" class="text">Text</text>
    </g>

    <!-- middle/triangles -->
    <g id="middle" clip-path="url(#triangles)">
        <rect fill="dodgerblue" x="0" y="0" width="500" height="300"  />
        <text x="50%" y="65%" text-anchor="middle" class="text">Text</text>
    </g>

    <!-- top/diamond -->
    <g id="top" clip-path="url(#diamond)">
        <rect fill="darkorange" x="0" y="0" width="500" height="300"  />
        <text x="50%" y="65%" text-anchor="middle" class="text">Text</text>
    </g>

</svg>

正文
正文
正文

带有菱形路径的顶层开始缩放为0，使其不可见。这两个三角形剪辑路径将设置动画，彼此相对，显示下面的底层。当两个三角形点相交时，顶层上的菱形剪辑路径将按比例放大，显示顶层，它是底层的副本

我还切换到剪辑路径而不是遮罩，因为它们a）支持更好，b）允许多条路径

对动画使用CSS（目前仅适用于WebKit）

更新：这里有一个可以在所有浏览器中使用的代码笔：