css - 如何为 SVG 文本设置动画但不是线性的？

Question

我有一个 SVG 格式的文本 Logo ，我想为整个文本制作动画，而不仅仅是轮廓。有什么办法吗？我可以给你看 code working我也将它包括在下面。

<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="50%" height="50%;" viewBox="0 0 912 212" style="enable-background:new 0 0 912 212;" xml:space="preserve">
<defs>
    <style type="text/css">

        .st0{fill:none;stroke:#19a4dd;}

        .st0{
            stroke-dasharray: 2000;
            stroke-dashoffset: 0;
            -webkit-animation: dash 10s linear forwards;
            -o-animation: dash 10s linear forwards;
            -moz-animation: dash 10s linear forwards;
            animation: dash 10s linear forwards;
        }

        @-webkit-keyframes dash {
            from{
                stroke-dashoffset: 2000;
            }
            to{
                stroke-dashoffset: 0;
            }
        }

    </style>
</defs>
<g>
    <path class="st0" d="M195.683,105.006c0.077,12.928,9.039,25.168,26.274,25.245c8.196,0,14.708-2.907,21.065-9.716l-4.979-3.978
        c-4.443,4.896-10.035,7.727-16.24,7.65c-10.188,0-17.695-6.656-19.074-15.759c0,0-0.23-1.989-0.306-3.672
        c0-1.607,0.23-3.748,0.306-3.748c0.843-7.191,6.435-15.3,17.618-15.3c9.422,0,16.699,6.503,17.618,15.3l0.153,1.147h-13.559v4.973
        h21.065c-0.46-16.677-10.648-27.387-25.202-27.464C205.411,79.837,195.683,91.236,195.683,105.006"/>
    <path class="st0" d="M115.404,79.837c-15.244,0-26.121,11.628-26.121,25.245c0,13.77,10.265,25.092,26.121,25.092
        s26.045-11.322,26.121-25.092C141.525,91.465,130.648,79.837,115.404,79.837 M115.481,132.316L115.481,132.316L115.481,132.316
         M96.407,105.006c0-11.016,8.809-19.278,18.997-19.278s18.997,8.262,18.997,19.278c0,10.251-8.733,19.125-18.997,19.201
        C105.139,124.207,96.483,115.257,96.407,105.006"/>
    <path class="st0" d="M168.795,86.339c4.596,0,7.89,1.836,9.882,4.667c1.992,2.831,2.834,6.579,2.834,10.481v28.076h6.511V98.197
        c0-6.503-2.451-10.863-6.052-13.693c-3.6-2.831-8.426-4.131-13.099-4.131s-9.652,1.301-13.405,4.131
        c-3.753,2.831-6.358,7.191-6.358,13.693v31.365h6.511v-28.076c0-3.902,0.766-7.65,2.834-10.481
        c1.992-2.831,5.362-4.667,9.882-4.667H168.795"/>
    <path class="st0" d="M260.181,83.968c-3.753,2.831-6.358,7.191-6.358,13.693v31.365h6.511v-28.076c0-3.902,0.766-7.65,2.834-10.481
        c1.992-2.831,5.362-4.667,9.882-4.667h0.153v-5.967C268.684,79.913,263.858,81.214,260.181,83.968"/>
    <g>
        <path class="st0" d="M40.028,129.103h19.61c7.967,0,13.635-3.213,17.465-7.803s5.669-10.71,5.669-16.371
            s-1.915-11.781-5.669-16.371c-3.83-4.59-9.499-7.803-17.465-7.803h-19.61l6.358,6.12h10.571c4.979,0,9.728,1.301,13.329,4.208
            c3.6,2.907,5.898,7.421,5.898,13.158l0,0v1.301l0,0c0,5.737-2.298,10.251-5.898,13.158c-3.6,2.907-8.35,4.284-13.329,4.284H40.028
            V129.103z"/>
    </g>
</g>
</svg>

我要最终效果look like this .

Answer 1

增加 stroke-width 以填充形状并在形状上放置一个 clip-path(使用具有原始 stroke-width 的形状的副本)因此 stroke-width 不会使形状显得太粗。