clipPath doesn't clip the symbol path on SVG rectangle

Question

Expected the rectangle will be clipped by a star on the example below, but it doesn't work.

Current result:
.

Expected result:

Where is the mistake? What did I miss?
Here is the 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: I know that the gradient can be added directly to the star itself even without clip, but I need exactly to clip the square directly with the star to find out why it doesn’t work and what was my mistake. The example was deliberately simplified since the real task is more complex and can't be solved without a clip.

Answer 1

Per the CSS Masking specification

A clipPath element can contain path elements, text elements, basic shapes (such as circle) or a use element. If a use element is a child of a clipPath element, it must directly reference path, text or basic shapes elements. Indirect references are an error and the clipPath element must be ignored.

Your clipPath references a use element that does not directly reference a path, text or basic shape so it's invalid and not rendered.