我举了一个例子来说明如何做到这一点。我知道这可能不完全是您想要的，但这说明了一条可以遵循的道路。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<style>
@keyframes fade-in-right {
from {
clip-path: circle(0px);
}
to {
clip-path: circle(40px);
}
}
#path2 {
animation: fade-in-right ease 4s infinite;
}
</style>
<g
stroke="#000000"
stroke-width="1"
fill="none"
id="g1">
<path
d="m 31.5294,14.2118 c 0,4.6701 -2.7671,8.6964 -6.7501,10.5233 1.6819,-1.3855 2.7529,-3.4871 2.7529,-5.8391 0,-4.1318 -3.3063,-7.4918 -7.4202,-7.5755 -0.0546,-0.0038 -0.1045,-0.0038 -0.1591,-0.0038 -0.0546,0 -0.1044,0 -0.159,0.0038 -1.5266,0.0828 -2.7351,1.3458 -2.7351,2.8903 v 14.4706 c 0,4.7934 -3.8889,8.6824 -8.68234,8.6824 v -23.152 c 0,-6.39252 5.18404,-11.57652 11.57644,-11.57652 6.3925,0 11.5765,5.184 11.5765,11.57652 z"
id="path1" />
</g>
<g
stroke="#000000"
stroke-width="1"
fill="none"
id="g2">
<path
d="m 31.5294,14.2118 c 0,4.6701 -2.7671,8.6964 -6.7501,10.5233 1.6819,-1.3855 2.7529,-3.4871 2.7529,-5.8391 0,-4.1318 -3.3063,-7.4918 -7.4202,-7.5755 -0.0546,-0.0038 -0.1045,-0.0038 -0.1591,-0.0038 -0.0546,0 -0.1044,0 -0.159,0.0038 -1.5266,0.0828 -2.7351,1.3458 -2.7351,2.8903 v 14.4706 c 0,4.7934 -3.8889,8.6824 -8.68234,8.6824 v -23.152 c 0,-6.39252 5.18404,-11.57652 11.57644,-11.57652 6.3925,0 11.5765,5.184 11.5765,11.57652 z"
id="path2"
style="fill:#000000;fill-opacity:1;stroke:none" />
</g>
</svg>
</body>
</html>