按照路径流对 svg 填充进行动画处理

问题描述 投票:0回答:1
svg
1个回答
0
投票

我举了一个例子来说明如何做到这一点。我知道这可能不完全是您想要的,但这说明了一条可以遵循的道路。

<!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>
© www.soinside.com 2019 - 2024. All rights reserved.