svg 实现渐变圆环旋转效果

效果

<svg width="100%" height="50%" version="1.1" xmlns="http://www.w3.org/2000/svg">

        <defs>

            <linearGradient id="linear1" x1="0%" y1="0%" x2="0%" y2="100%">

                <stop offset="0%" stop-color="red" stop-opacity="0.4" />

                <stop offset="100%" stop-color="red" stop-opacity="0.8" />

            </linearGradient>

            <linearGradient id="linear2" x1="0%" y1="100%" x2="0%" y2="0%">

                <stop offset="0%" stop-color="red" stop-opacity="0.4" />

                <stop offset="100%" stop-color="red" stop-opacity="0" />

            </linearGradient>

        </defs>

        <path class="tsetst" d="M 110 10 a 100 100 0 0 1 0 200" fill="none" stroke="url(#linear1)" stroke-width="10">

            <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 110 110" to="360 110 110"

                    additive="sum" begin="0s" dur="2s" repeatCount="indefinite"></animateTransform>

        </path>

        <path class="tsetst" d="M 110 10 a 100 100 0 0 1 0 200" transform="translate(220.1,220)rotate(180)" fill="none"

            stroke="url(#linear2)" stroke-width="10">

            <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 110 110" to="360 110 110"

                additive="sum" begin="0s" dur="2s" repeatCount="indefinite"></animateTransform>

        </path>

    </svg>

    <svg width="100%" height="20%" version="1.1" xmlns="http://www.w3.org/2000/svg">

        <rect x="10" y="10" width="30" height="30" style="fill: #ff9; stroke: black;">

            <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 25 25" to="360 25 25"

                additive="sum" begin="0s" dur="2s" repeatCount="indefinite"></animateTransform>

        </rect>

    </svg>