2

I have a simple outer circle svg created with the following code

    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
    <svg
        xmlns="http://www.w3.org/2000/svg"
        id="Layer_1"
        data-name="Layer 1"
        viewBox="0 0 260 260">
        <style>
            .class1 {
                fill-opacity:1;
                fill:url(#grayGradient);
            }
        </style>
        <defs>
            <linearGradient id="grayGradient"
                gradientUnits="userSpaceOnUse"
                x1="0" y1="130" x2="260" y2="130">
                <stop offset="0" style="stop-color:#919191;stop-opacity:1;" />
                <stop offset="1" style="stop-color:#919191;stop-opacity:0;" />
            </linearGradient>
        </defs>
        <title>outer circle</title>
        <path
            d="M130,0A130,130,0,1,0,260,130,130,130,0,0,0,130,0Zm.36,235a105,105,0,1,1,105-105A105,105,0,0,1,130.36,235Z"
            class="class1" />
    </svg>

I'm trying to make this look like an indeterminate progress circle, so I want to rotate the gradient around the path of the circle. I know that if I add a gradientTransform=rotate() attribute to the linearGradient, it will move the position of the gradient in the circle.

Is it possible to animate the gradientTransform so that it will appear that the circle is spinning?

I'm very new to svg. Perhaps there is a better way to achieve the effect I'm looking for? I do need to use an svg image that has the same shape.

Thanks for any and all suggestions...

user1729843
  • 43
  • 4
  • possible duplicate of : https://stackoverflow.com/questions/48937532/how-to-animate-a-svg-figure-like-a-progress-bar-with-css/48937889#48937889 – Temani Afif Apr 23 '18 at 08:39
  • @TemaniAfif - Thank you for the link. It is a similar type of problem, but I'm having issues making the animation follow the path of the circle; the offset animation draws the circle in two semicircles from the middle instead of following the external edge. I'm assuming this is due to the way the svg path is constructed? With stop-color animation, I'm able to get the gradient to fade in and out, but it doesn't rotate around the circle's path. If you could provide any additional pointers, I'd really appreciate it. – user1729843 Apr 23 '18 at 19:13

1 Answers1

4

Just add inside <linearGradient> ... </linearGradient> this string:

<animateTransform
  attributeName="gradientTransform"
  type="rotate"
  from="0 130 130"
  to="360 130 130"
  dur="1s"
  repeatCount="indefinite"
/>

But it won't work in IE and Safari.

vasbaz
  • 41
  • 3
  • Welcome to SO and your valuable input! Next time, please try to explain your suggestion a bit more, for more guidance, see https://stackoverflow.com/help/how-to-answer – B--rian Jan 27 '20 at 14:04