clipPath 不会剪切 SVG 矩形上的符号路径

Question

预计矩形会在下面的示例中被星形剪辑，但它不起作用。

目前结果：
。

预期结果：

错在哪里？我错过了什么？
这是 CodePen demo。

<svg
    width="200"
    height="190.2113"
    viewBox="0 0 200 190.2113"
    xmlns="http://www.w3.org/2000/svg"
    style="border-style: outset; border-width: 4px;"
>
    <defs>
        <!-- Gradient -->
        <linearGradient id="gradientAnimation" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stop-color="lightgreen">
                <!-- Gradient offset animation 1 -->
                <animate
                    id="gradientAnimation_1"
                    attributeName="offset"
                    values="0;1;0"
                    dur="10s"
                    begin="0s"
                    repeatCount="indefinite"
                ></animate>
            </stop>
            <stop offset="0%" stop-color="tomato">
                <!-- Gradient offset animation 2 -->
                <animate
                    id="gradientAnimation_2"
                    attributeName="offset"
                    values="0;1;0"
                    dur="10s"
                    begin="0s"
                    repeatCount="indefinite"
                ></animate>
            </stop>
        </linearGradient>

        <!-- Symbol -->
        <symbol id="symbol">
            <!-- Star -->
            <path
                fill="#ffe845"
                d="M 194.77143,-43.529396 242.70298,53.590537 349.88119,69.164447 272.3263,144.76177 290.63453,251.50691 194.77142,201.10869 98.908314,251.5069 117.21654,144.76177 39.661662,69.164439 146.83987,53.590538 Z"
                transform="matrix(0.64470474,0,0,0.64470474,-25.570061,28.063608)"
            ></path>
        </symbol>

        <!-- Clip Path -->
        <clipPath id="clipPath">
            <use href="#symbol"></use>
        </clipPath>
    </defs>

    <!-- Rect -->
    <rect clip-path="url(#clipPath)" width="200" height="190.2113" x="0" y="0" fill="url(#gradientAnimation)"></rect>
</svg>

PS：我知道即使没有剪辑，渐变也可以直接添加到星形本身，但我需要直接用星形来剪辑正方形，以找出它不起作用的原因以及我的错误是什么。该示例被故意简化，因为实际任务更加复杂，没有剪辑就无法解决。

Answer 1

根据 CSS Masking 规范

clipPath 元素可以包含路径元素、文本元素、基本形状（例如圆形）或 use 元素。如果 use 元素是 ClipPath 元素的子元素，则它必须直接引用路径、文本或基本形状元素。间接引用是一个错误，必须忽略 ClipPath 元素。

您的clipPath引用的use元素不直接引用路径、文本或基本形状，因此它无效且不会渲染。