动画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>

位置按容器的顶点计算。