我可以使用 PNG 作为这个水动画的蒙版而不是 <text> 标签吗？答案

【问题标题】：Can I use a PNG as a mask for this water animation instead of <text> tag?我可以使用 PNG 作为这个水动画的蒙版而不是 <text> 标签吗？
【发布时间】：2016-08-04 22:36:03
【问题描述】：

所以我发现了这个惊人的 codepen 动画，它使用 （我认为是 GSAP）

为通过 <text> 标签提供的任何文本设置“注水”效果

Codepen 截图如下 CLICK HERE FOR CODEPEN

我的问题：我将如何使用 .PNG 图像而不是 HTML 文本来获得相同的结果？

例如

代替当前代码：<text id="text" transform="matrix(1 0 0 1 -8.0684 116.7852)" font-family="'Cabin Condensed'" font-size="161.047">LOADING</text>

我希望做更多类似

的事情

<img src="LOADING.png" id="text" transform="matrix(1 0 0 1 -8.0684 116.7852)" width="569" height="186">

加载示例 .PNG IMG 可以使用：（与上面的<img> sn-p 尺寸相同）

感谢您的帮助！这东西不是最好的，很想使用效果！

如果效果更好，这是上面发布的 png 文件的 SVG：imgh.us/loadingpng.svg

【问题讨论】：

这和你的last question有什么不同？
你尝试添加 png 图片。
哦，对不起，我以为我删除了。
为什么不用您最喜欢的图形编辑器创建所需的 .png 文件？
脚本作用于 svg 文本的填充属性；如果您可以将您的 png 转换为矢量，那么应用此效果真的很容易......您愿意将其转换为 SVG 路径吗？

标签： jquery css animation gsap

【解决方案1】：

这是pen，

从外部资源嵌入到 codepen 中存在一个 cors 问题（如果您从同一个域提供服务，则可以克服这个问题......）

但是一旦你有你的路径内联它是一件轻而易举的事，只需将 id 更改为text，脚本就会完成它的工作。

为了调整动画改变TweenMax.fromTo选项

【讨论】：

太好了！谢谢！所以我想让文字变黑。但是当我这样做时，它并没有显示出水的效果。由于某种原因，我设置的水效果显示为“褪色”的任何颜色，我如何将它设置为我需要的真实颜色？下面是一个例子：codepen.io/anon/pen/ONZqgJ
我真的想奖励你这个答案我只是不能再付 50 分来解决颜色问题。有什么想法吗？
AFAIK 脚本集是pattern#water 中指定颜色的叠加，如果你想要你的字母黑色，你可以删除填充和描边颜色并将pattern#water 填充属性设置为black, here's an example on the first letter path跨度>
不，你太棒了，我会在几秒钟内给你这个奖项，不管你的下一条评论如何，但还有另一个问题。这很有效，我几乎有我需要的东西。我需要弄清楚的最后一件事是如何制作它，以便其他每个字母中的液体都是不同的颜色。有任何想法吗？ codepen.io/maio/pen/jqxJZy
嗯不知道这就是我需要的。我最终使 GSAP 脚本有点草率，但得到了我想要的效果：codepen.io/anon/pen/aNGMeP