Javascript 动画SVG路径元素的背景图像

你好，我发现了一个非常有趣的网站：

我想知道它们是如何为动画SVG路径元素提供背景图像的

我以前尝试过为SVG设置背景图像。不起作用。然而，我在DOM中看到，实际上图像和SVG是完全分开的。

img

位于某个指定的

ul

元素中

---

当

悬停时，
路径
元素的不透明度是否降低到零，从而露出下面的img？如果是这样的话，我似乎无法弄清楚确切的位置是如何计算出来的。如何实现这种效果？
我使用了命名的clipPath来裁剪图像。最简单的例子是：

<svg id="pLayout">
    <g>
        <clipPath id="hex-mask">
            <path d="..."></path>
        </clipPath>
    </g>
    <image x="..." y="..." xlink:href="..." **clip-path="url(#hex-mask)"** />
</svg>



位置根据容器的顶点计算