如何为自定义CG字母SVG添加填充/取消填充的Loader Spinner动画？

问题说明 #

• 目标：为自定义CG字母SVG添加加载动画，实现字母C和G的填充-取消填充循环效果
• 当前困境：已实现轮廓的绘制/擦除动画，但无法实现填充效果；尝试修改stroke-width，因描边向内外双向扩展，无法模拟填充效果

解决方案：可行 #

核心思路是通过双层路径+裁剪动画实现：用底层填充路径作为视觉载体，上层描边路径通过clip-path控制填充区域的显示范围，配合描边dash动画实现填充的逐步显示/隐藏。

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CG Spinner Animation</title>
    <style>
        .fill-path {
            fill: red;
            stroke: none;
            /* 用裁剪路径限制填充区域，只显示描边动画覆盖的部分 */
            clip-path: url(#stroke-clip);
        }

        .stroke-mask {
            fill: none;
            stroke: white;
            stroke-width: 5;
            stroke-dasharray: 0 1000;
            animation: fillAnimation 2.5s ease-in-out infinite;
        }

        @keyframes fillAnimation {
            0% {
                stroke-dasharray: 0 1000;
            }
            50% {
                stroke-dasharray: 1000 0;
            }
            100% {
                stroke-dasharray: 0 1000;
            }
        }
    </style>
</head>
<body>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
    <!-- 定义裁剪路径：用描边动画的路径作为裁剪范围 -->
    <defs>
        <clipPath id="stroke-clip">
            <path class="stroke-mask" d="M394.5,577.9c-14.9,16.5-31.2,27-50.5,32.3l-0.2-0.5c-10.9,3.1-22.2,4.7-33.7,4.7
                c-66.9,0-121.2-54.4-121.2-121.2s54.4-121.2,121.2-121.2c34.6,0,66.9,14.5,89.9,39.9l13.1-10.9c-26.3-29.4-63.3-46.1-103-46.1
                c-76.2,0-138.2,62-138.2,138.2s62,138.2,138.2,138.2c40.7,0,70.6-13,97-42.1c25.7-28.4,44.4-68,64.2-109.9
                c15.6-33.1,31.7-67.1,52.3-97.3l0.4,0.3c38.6-61.5,104.9-98.2,177.2-98.2c59.7,0,116,25.2,155.7,69.5l13.1-10.8
                c-42.9-48.2-104-75.7-168.8-75.7c-67.3,0-121.4,23.5-165.5,71.9c-35.2,38.7-57.9,86.7-79.8,133.2
                C436.7,512.9,418.5,551.4,394.5,577.9z"/>
            <path class="stroke-mask" d="M915.9,546.1c0-39.7-23.7-74-57.6-89.6c-0.8-0.8-1.7-1.4-2.8-1.9c-12-5-24.8-7.5-37.8-7.5
                c-54.7,0-99.2,44.5-99.2,99.2c0,22.2,7.3,43.4,20.8,60.7c-11.8,3.8-24.2,5.9-37,5.9c-66.7,0-120.9-54.3-120.9-120.9
                c0-39.3,18.8-74.2,47.9-96.3c20.2-14.9,45.1-23.8,72-23.8c33.4,0,65,13.7,87.9,37.7l0.9-0.8l12.2-10.1l0.9-0.8
                c-26.1-28-62.4-43.9-100.9-43.9c-10.9,0-21.5,1.3-31.7,3.7c-27.2,5.4-49.7,18.4-69.5,40c-1.8,1.9-3.5,4-5.2,6
                c-1.2,1.5-2.4,2.9-3.6,4.4c-0.5,0.6-0.9,1.2-1.4,1.8c-0.2,0.2-0.3,0.4-0.5,0.6c-19.7,25.7-36.2,59.2-55.1,99
                c-21.1,44.8-43,91-75.7,127.2c-26.2,29-56.4,48.2-91.3,57.9l-0.2-0.6c-18.8,5.4-38.3,8.2-58,8.2c-115.3,0-209.1-93.8-209.1-209.1
                s93.8-209.1,209.1-209.1c61,0,117.9,26,157.7,71.8l13.1-10.8c-43-49.7-104.7-77.9-170.8-77.9C185.5,267.1,84,368.5,84,493.2
                s101.4,226.1,226.1,226.1c65.8,0,118.9-23.2,162.1-71c12.2-13.4,22.8-28.1,32.5-43.4c18.1,31.8,43.7,58.8,74.7,78.7
                c36.4,23.4,78.5,35.7,121.9,35.7c91.1,0,172.8-54.2,208.3-138.1l-0.2-0.1C913.7,570,915.9,558.2,915.9,546.1z M701.3,702.3
                c-40.1,0-79-11.4-112.7-33c-31.4-20.2-56.8-48.2-73.7-81.3c13.2-23.1,24.6-47.3,35.9-71.1c4.1-8.8,8.2-17.3,12.3-25.6
                c0,0.6,0,1.2,0,1.9c0,76.2,62,138.2,138.2,138.2c48.8,0,93-24.9,118.2-66.5l-0.1-0.1c2.8-4.5,5.4-9.1,7.6-14
                c2-4.2,0.2-9.3-4.1-11.3c-4.2-2-9.3-0.2-11.3,4.1c-11.8,24.9-31.6,44.6-55.4,56.5c-13.2-14.9-20.5-34-20.5-54
                c0-44.9,36.6-81.5,81.5-81.5c44.9,0,81.5,36.6,81.5,81.5c0,11.1-2.2,21.9-6.6,32.1c0,0.1-0.1,0.2-0.1,0.3
                C858.5,653.9,784.1,702.3,701.3,702.3z"/>
        </clipPath>
    </defs>

    <!-- 底层填充路径 -->
    <g>
        <path class="fill-path" d="M394.5,577.9c-14.9,16.5-31.2,27-50.5,32.3l-0.2-0.5c-10.9,3.1-22.2,4.7-33.7,4.7
            c-66.9,0-121.2-54.4-121.2-121.2s54.4-121.2,121.2-121.2c34.6,0,66.9,14.5,89.9,39.9l13.1-10.9c-26.3-29.4-63.3-46.1-103-46.1
            c-76.2,0-138.2,62-138.2,138.2s62,138.2,138.2,138.2c40.7,0,70.6-13,97-42.1c25.7-28.4,44.4-68,64.2-109.9
            c15.6-33.1,31.7-67.1,52.3-97.3l0.4,0.3c38.6-61.5,104.9-98.2,177.2-98.2c59.7,0,116,25.2,155.7,69.5l13.1-10.8
            c-42.9-48.2-104-75.7-168.8-75.7c-67.3,0-121.4,23.5-165.5,71.9c-35.2,38.7-57.9,86.7-79.8,133.2
            C436.7,512.9,418.5,551.4,394.5,577.9z"/>
        <path class="fill-path" d="M915.9,546.1c0-39.7-23.7-74-57.6-89.6c-0.8-0.8-1.7-1.4-2.8-1.9c-12-5-24.8-7.5-37.8-7.5
            c-54.7,0-99.2,44.5-99.2,99.2c0,22.2,7.3,43.4,20.8,60.7c-11.8,3.8-24.2,5.9-37,5.9c-66.7,0-120.9-54.3-120.9-120.9
            c0-39.3,18.8-74.2,47.9-96.3c20.2-14.9,45.1-23.8,72-23.8c33.4,0,65,13.7,87.9,37.7l0.9-0.8l12.2-10.1l0.9-0.8
            c-26.1-28-62.4-43.9-100.9-43.9c-10.9,0-21.5,1.3-31.7,3.7c-27.2,5.4-49.7,18.4-69.5,40c-1.8,1.9-3.5,4-5.2,6
            c-1.2,1.5-2.4,2.9-3.6,4.4c-0.5,0.6-0.9,1.2-1.4,1.8c-0.2,0.2-0.3,0.4-0.5,0.6c-19.7,25.7-36.2,59.2-55.1,99
            c-21.1,44.8-43,91-75.7,127.2c-26.2,29-56.4,48.2-91.3,57.9l-0.2-0.6c-18.8,5.4-38.3,8.2-58,8.2c-115.3,0-209.1-93.8-209.1-209.1
            s93.8-209.1,209.1-209.1c61,0,117.9,26,157.7,71.8l13.1-10.8c-43-49.7-104.7-77.9-170.8-77.9C185.5,267.1,84,368.5,84,493.2
            s101.4,226.1,226.1,226.1c65.8,0,118.9-23.2,162.1-71c12.2-13.4,22.8-28.1,32.5-43.4c18.1,31.8,43.7,58.8,74.7,78.7
            c36.4,23.4,78.5,35.7,121.9,35.7c91.1,0,172.8-54.2,208.3-138.1l-0.2-0.1C