Javascript 悬停时的SVG掩码和动画

我不太擅长SVG和mask，我想知道是否有可能在鼠标悬停时播放这个动画？（带jquery或不带jquery） 我需要的是： -Html文本 -SVG 3/4圆 -背景是div背景 如果无法使用html文本，则可能可以使用svg中的曲线文本

以下是我想要实现的目标：

---

找不到您的字体，没有精确地使用数学

var擦拭步骤=[
[1000, "0,0 500,0 500,500 0,500"],
[100,  "250,250 0,200 0,0 500,0 500,500 0,500 0,250"],
[100,  "250,250 0,100 0,0 500,0 500,500 0,500 0,250"],
[100,  "250,250 0,0 500,0 500,500 0,500 0,250"],
[100,  "250,250 100,0 500,0 500,500 0,500 0,250"],
[100,  "250,250 200,0 500,0 500,500 0,500 0,250"],
[100,  "250,250 250,0 500,0 500,500 0,500 0,250"],
[100,  "250,250 300,0 500,0 500,500 0,500 0,250"],
[100,  "250,250 400,0 500,0 500,500 0,500 0,250"],
[100,  "250,250 500,0 500,500 0,500 0,250"],
[100,  "250,250 500,100 500,500 0,500 0,250"],
[100,  "250,250 500,200 500,500 0,500 0,250"],
[100,  "250,250 500,250 500,500 0,500 0,250"],
[100,  "250,250 500,300 500,500 0,500 0,250"],
[100,  "250,250 500,400 500,500 0,500 0,250"],
[100,  "250,250 500,500 0,500 0,250"],
[100,  "250,250 400,500 0,500 0,250"],
[100,  "250,250 300,500 0,500 0,250"],
[100,  "250,250 250,500 0,500 0,250"],
[100,  "250,250 200,500 0,500 0,250"],
[100,  "250,250 100,500 0,500 0,250"],
[100,  "250,250 0,500 0,250"],
[100,  "250,250 0,400 0,250"],
[100,  "250,250 0,300 0,250"],
[3000,  ""]
];
var-wipe_阶跃=0；
函数wipe（）{
擦拭步数=擦拭步数%擦拭步数.length；
$（'wiper'）.attr（'points'，wipe_steps[wipe_step][1]）；
设置超时（擦除，擦除步骤[擦除步骤++][0]）；
}
擦拭（）
#动画{
显示：内联块；
宽度：500px；
高度：500px；
}

信息
辅助记忆
SOCIÉ；泰尔斯
信息
辅助记忆
SOCIÉ；泰尔斯
很抱歉，您的浏览器不支持内嵌SVG。
找不到您的字体，没有精确地使用数学


var擦拭步骤=[
[1000, "0,0 500,0 500,500 0,500"],
[100,  "250,250 0,200 0,0 500,0 500,500 0,500 0,250"],
[100,  "250,250 0,100 0,0 500,0 500,500 0,500 0,250"],
[100,  "250,250 0,0 500,0 500,500 0,500 0,250"],
[100,  "250,250 100,0 500,0 500,500 0,500 0,250"],
[100,  "250,250 200,0 500,0 500,500 0,500 0,250"],
[100,  "250,250 250,0 500,0 500,500 0,500 0,250"],
[100,  "250,250 300,0 500,0 500,500 0,500 0,250"],
[100,  "250,250 400,0 500,0 500,500 0,500 0,250"],
[100,  "250,250 500,0 500,500 0,500 0,250"],
[100,  "250,250 500,100 500,500 0,500 0,250"],
[100,  "250,250 500,200 500,500 0,500 0,250"],
[100,  "250,250 500,250 500,500 0,500 0,250"],
[100,  "250,250 500,300 500,500 0,500 0,250"],
[100,  "250,250 500,400 500,500 0,500 0,250"],
[100,  "250,250 500,500 0,500 0,250"],
[100,  "250,250 400,500 0,500 0,250"],
[100,  "250,250 300,500 0,500 0,250"],
[100,  "250,250 250,500 0,500 0,250"],
[100,  "250,250 200,500 0,500 0,250"],
[100,  "250,250 100,500 0,500 0,250"],
[100,  "250,250 0,500 0,250"],
[100,  "250,250 0,400 0,250"],
[100,  "250,250 0,300 0,250"],
[3000,  ""]
];
var-wipe_阶跃=0；
函数wipe（）{
擦拭步数=擦拭步数%擦拭步数.length；
$（'wiper'）.attr（'points'，wipe_steps[wipe_step][1]）；
设置超时（擦除，擦除步骤[擦除步骤++][0]）；
}
擦拭（）
#动画{
显示：内联块；
宽度：500px；
高度：500px；
}

信息
辅助记忆
SOCIÉ；泰尔斯
信息
辅助记忆
SOCIÉ；泰尔斯
很抱歉，您的浏览器不支持内嵌SVG。
创建一个遮罩，用黑色填充它（在遮罩中，这会阻止任何东西被渲染），然后在遮罩中，在允许绘制的位置插入纯白色。现在，在插入（在您的例子中为蓝色）形状或文本时，请参考该遮罩。您甚至可以制作多个版本的遮罩，每个版本都从黑色开始，然后应用白色文本，然后再应用半圆以擦除越来越少的白色。通过交换各种遮罩来增加显示越来越多的蓝色。谢谢，但是你有一个动画的小例子吗？我可以用css或Php做很多事情，但是SVG、掩码和动画不是我的能力…创建一个掩码，用黑色填充它（在掩码中，这可以防止任何东西被渲染），然后在掩码中插入纯白色，在你想允许绘制的地方。现在，在插入（在您的例子中为蓝色）形状或文本时，请参考该遮罩。您甚至可以制作多个版本的遮罩，每个版本都从黑色开始，然后应用白色文本，然后再应用半圆以擦除越来越少的白色。通过交换各种遮罩来增加显示越来越多的蓝色。谢谢，但是你有一个动画的小例子吗？我可以用css或Php做很多事情，但是SVG、掩码和动画不是我的能力……你真厉害！谢谢！我试着改变速度，以为设置超时是为了这个，但最后似乎它更多的是为了绘图。。。那么如何改变雨刮器的速度呢？：）@user2883964在wipe_steps数组中，第一个元素是该“帧”的延迟（以毫秒为单位）。你可以用“开始延迟”这样的变量替换1000，用“动画速度”替换所有100，用“最终暂停”替换3000。然后，读取代码和更改动画速度就很简单了。您熟悉JavaScript变量，是吗？是的，谢谢！这是为了在所有这些数字中找到什么是为了什么添加此掩码：
。那就吃你的白葡萄酒