模板对带有剔除文字的网站的影响

Question

该网站的愿景是一整页gif，顶部带有一整页模板效果。模具将显示站点徽标和动态文本菜单链接（这些链接可能会不时更改）。徽标和每个菜单项都将具有挖空样式，并在下面显示gif。希望this link将有助于可视化我要做什么。另请参见annotated image。

在上面的示例中，我最终希望将文本放置在徽标的中心，并在徽标周围加上其他浮动菜单选项，这些选项也都是剔除文本。所有剔除部分应只显示屏幕gif的下面播放的那部分（而不是全部播放自己的gif）。所有菜单项都是可单击的链接，我什至希望对它们做一些悬停效果。这太雄心勃勃吗？

到目前为止，我一直在通过使用徽标的SVG将webkit-mask应用到gif来进行此操作，并分别将SVG masking与相同gif的另一个副本一起使用来制作敲除文本。不知道这些是否是最好的方法。我目前无法在徽标的中心显示敲除文本，因为从技术上讲，它是完全独立的

我的问题是

1. 是否有更好的方法来做到这一点？我使用的是最好的，最兼容浏览器的方法吗？我还考虑过使用-webkit-background-clip: text;，但我看到了很多讨厌之处，因为它显然与Chrome兼容？
2. 有没有一种方法可以使SVG图片和文本元素成为同一网站掩码的一部分，而又不会将所有内容都变成单个固定的SVG文件？还是以其他方式统一这些解决方案？我宁愿不为每个文本元素加载gif的另一个副本，也不重叠十二个元素来完成此工作。必须有一个更优雅的解决方案。

感谢任何提示或见识。