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

Question

你好，我遇到了一个看起来很有趣的网站：

http://digitalbakery.org/

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

我之前曾尝试为 SVG 设置背景图像。不工作。然而，在 DOM 中我看到实际上图像和 SVG 是完全分开的。 img 在某处指定的 ul 元素中。

Path 元素，当hover 时，它的不透明度是否降低到零，从而露出下面的img？如果是这样，我似乎无法弄清楚确切的位置是如何计算出来的。怎样才能达到这种效果？

Answer 1

我使用了命名的 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>

位置由容器的顶点计算。