How to animate svg paths with different speeds, by fixing a rotation center point?-CodePudding

1. Introduction

I have an image that i want to animate its specific 'paths' around a center point.

For example 'path1' will rotate at t=1s, and 'path2' at t=3s.

2. The question:

How can this be done?

3.Clarification

The image is on a simple index page.

4.This is the source image file

           <g id="first">
            <path id="path1" fill="#ed1c24" opacity="1.00" d=" M 7.01 7.01 C 104.67 6.99 202.33 6.99 299.99 7.01 C 300.01 104.67 300.01 202.33 299.99 299.99 C 202.33 300.00 104.67 300.01 7.01 299.99 C 7.00 202.33 6.99 104.67 7.01 7.01 M 33.01 32.01 C 32.99 113.67 32.99 195.33 33.01 276.99 C 114.00 277.01 195.00 277.01 275.99 276.99 C 276.01 195.33 276.00 113.67 275.99 32.01 C 195.00 31.99 114.00 31.99 33.01 32.01 Z" />
            </g>
            <g id="second">
            <path id="path2" fill="#000000" opacity="1.00" d=" M 153.11 60.95 C 153.80 60.95 155.19 60.95 155.89 60.95 C 164.16 84.01 170.90 107.63 178.27 131.00 C 193.87 131.15 209.34 132.65 225.03 131.99 C 231.77 133.78 238.79 132.61 245.68 133.11 C 247.47 134.01 247.60 136.84 245.75 137.75 C 228.10 151.08 210.95 165.34 193.10 178.24 C 200.20 200.70 205.97 223.63 212.89 246.17 C 213.90 248.26 211.70 251.09 209.51 249.75 C 191.40 237.05 173.47 224.11 155.49 211.23 C 154.51 210.75 153.61 210.91 152.79 211.69 C 135.34 224.34 117.79 236.83 100.20 249.29 C 98.13 251.48 94.85 248.71 96.11 246.17 C 103.03 223.63 108.79 200.70 115.90 178.24 C 98.05 165.34 80.90 151.08 63.25 137.75 C 61.40 136.84 61.52 134.01 63.32 133.12 C 70.21 132.61 77.23 133.78 83.97 131.99 C 99.66 132.65 115.13 131.15 130.73 131.00 C 138.19 107.66 144.91 84.03 153.11 60.95 Z" />
            </g>

CodePudding user response：

To accomplish this you can use the transform attribute to rotate the paths around the center point and CSS keyframe animations to rotate the paths at different speeds.

css:

#path1 {
  animation: rotate1 5s linear infinite;
}
#path2 {
  animation: rotate2 15s linear infinite;
}

@keyframes rotate1 {
  from {
    transform: rotate(0deg) translate(-150,-150) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translate(-150,-150) rotate(-360deg);
  }
}
@keyframes rotate2 {
  from {
    transform: rotate(0deg) translate(-150,-150) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translate(-150,-150) rotate(-360deg);
  }
}

Another solution I can think of is to use the CSS animation property, the transform-origin property to set the rotation center point, and the animation property to rotate the path by a specific degree over a specific duration.

Here is an example of how to animate the path1 with a rotation center at (150,150) and rotate it 360deg in 5s:

css:

#path1 {
  transform-origin: 150px 150px;
  animation: rotation 5s linear infinite;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Similarly, you can animate path2 at a different speed by adjusting the duration or the animation timing function.

Note that these solutions assume that the path is already styled and positioned correctly on the webpage.

CodePudding user response：

**I found a simpler way to rotate specific paths of an svg file with your desired speed.**

*Here is the code that worked for me:*

    <svg width="100pt" height="100pt" viewBox="0 0 160 160" version="1.1" xmlns="http://www.w3.org/2000/svg">
 <g id="first">
            <path id="path1" fill="#ed1c24" opacity="1.00" d=" M 7.01 7.01 C 104.67 6.99 202.33 6.99 299.99 7.01 C 300.01 104.67 300.01 202.33 299.99 299.99 C 202.33 300.00 104.67 300.01 7.01 299.99 C 7.00 202.33 6.99 104.67 7.01 7.01 M 33.01 32.01 C 32.99 113.67 32.99 195.33 33.01 276.99 C 114.00 277.01 195.00 277.01 275.99 276.99 C 276.01 195.33 276.00 113.67 275.99 32.01 C 195.00 31.99 114.00 31.99 33.01 32.01 Z" />
<animateTransform attributeName="transform"
            type="rotate"

            from="0 80 80"

            to="360 80 80"

            begin="0s"

            dur="1.00s"

            repeatCount="indefinite"
    />
            </g>
            <g id="second">
            <path id="path2" fill="#000000" opacity="1.00" d=" M 153.11 60.95 C 153.80 60.95 155.19 60.95 155.89 60.95 C 164.16 84.01 170.90 107.63 178.27 131.00 C 193.87 131.15 209.34 132.65 225.03 131.99 C 231.77 133.78 238.79 132.61 245.68 133.11 C 247.47 134.01 247.60 136.84 245.75 137.75 C 228.10 151.08 210.95 165.34 193.10 178.24 C 200.20 200.70 205.97 223.63 212.89 246.17 C 213.90 248.26 211.70 251.09 209.51 249.75 C 191.40 237.05 173.47 224.11 155.49 211.23 C 154.51 210.75 153.61 210.91 152.79 211.69 C 135.34 224.34 117.79 236.83 100.20 249.29 C 98.13 251.48 94.85 248.71 96.11 246.17 C 103.03 223.63 108.79 200.70 115.90 178.24 C 98.05 165.34 80.90 151.08 63.25 137.75 C 61.40 136.84 61.52 134.01 63.32 133.12 C 70.21 132.61 77.23 133.78 83.97 131.99 C 99.66 132.65 115.13 131.15 130.73 131.00 C 138.19 107.66 144.91 84.03 153.11 60.95 Z" />
<animateTransform attributeName="transform"
            type="rotate"

            from="0 80 80"

            to="360 80 80"

            begin="0s"

            dur="3.00s"

            repeatCount="indefinite"
    />
            </g>
</svg>