Getting svg to rotate correctly on hover

user_3116172 0
Viewed 108

I'm trying to get svg circular lines to rotate from the centre point of the svg. At the minute it's rotating on it's axis which is not what i want to happen. Any ideas on how to solve this?

This is my code:

#lines {
  animation: antiClockwiseSpin 30s infinite linear;
  animation-play-state: paused;
}

svg:hover #lines {
  animation-play-state: running;
}

@keyframes antiClockwiseSpin {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="435" height="435" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
<g fill="#000" id="lines">
<path fill="none" d="M13.528,293.508C4.551,269.306,0,243.827,0,217.778c0-28.265,5.336-55.765,15.859-81.737l1.802,0.73
    C7.233,162.51,1.945,189.765,1.945,217.778c0,25.817,4.511,51.068,13.407,75.053L13.528,293.508z"/>
<path d="M217.778,435.556c-41.973,0-82.721-11.965-117.838-34.603c-34.202-22.047-61.498-53.081-78.937-89.745
    c-0.231-0.485-0.025-1.065,0.46-1.296c0.484-0.233,1.065-0.025,1.296,0.46c17.284,36.337,44.337,67.095,78.235,88.946
    c34.803,22.435,75.186,34.293,116.784,34.293c11.55,0,23.139-0.919,34.445-2.733c0.526-0.087,1.029,0.275,1.114,0.806
    c0.085,0.53-0.276,1.029-0.806,1.114C241.123,434.629,229.431,435.556,217.778,435.556z"/>
<path fill="none" d="M269.654,429.34l-0.461-1.889c30.629-7.484,59.825-21.988,84.433-41.944l1.225,1.511
    C330.021,407.152,300.56,421.787,269.654,429.34z"/>
<path d="M361.996,380.637c-0.268,0-0.534-0.11-0.726-0.325c-0.357-0.401-0.322-1.015,0.079-1.373
    c45.924-40.941,72.264-99.682,72.264-161.161c0-15.731-1.701-31.424-5.054-46.646c-0.115-0.525,0.216-1.043,0.74-1.159
    c0.526-0.12,1.043,0.216,1.159,0.74c3.384,15.359,5.099,31.194,5.099,47.064c0,62.033-26.576,121.303-72.914,162.612
    C362.457,380.556,362.226,380.637,361.996,380.637z"/>
<path fill="none" d="M423.026,150.825c-17.539-53.8-56.571-99.477-107.089-125.319l0.886-1.731
    c50.971,26.074,90.355,72.162,108.051,126.447L423.026,150.825z"/>
<path d="M28.427,113.072c-0.16,0-0.323-0.04-0.474-0.124c-0.469-0.262-0.636-0.855-0.374-1.323C66.089,42.772,138.969,0,217.778,0
    c31.227,0,61.374,6.469,89.603,19.229c0.489,0.221,0.706,0.797,0.485,1.287c-0.221,0.489-0.797,0.706-1.287,0.485
    C278.605,8.356,248.727,1.945,217.778,1.945c-78.106,0-150.336,42.391-188.502,110.63
    C29.098,112.893,28.768,113.072,28.427,113.072z"/>
</g>
</svg>

Here's a jsfiddle: https://jsfiddle.net/alexgomy/fdkh0wzb/1/

css-animations css
1 Answers

Unlike HTML elements, the default transform-origin of SVG elements is 0 0 (top left). You need to set transform-origin: center; on #lines:

#lines {
  animation: antiClockwiseSpin 30s infinite linear;
  animation-play-state: paused;
  transform-origin: center;
}

svg:hover #lines {
  animation-play-state: running;
}

@keyframes antiClockwiseSpin {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes antiClockwiseSpin {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="435" height="435" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">

  <g fill="#000" id="lines">
    <path fill="none" d="M13.528,293.508C4.551,269.306,0,243.827,0,217.778c0-28.265,5.336-55.765,15.859-81.737l1.802,0.73
    C7.233,162.51,1.945,189.765,1.945,217.778c0,25.817,4.511,51.068,13.407,75.053L13.528,293.508z"/>
    <path d="M217.778,435.556c-41.973,0-82.721-11.965-117.838-34.603c-34.202-22.047-61.498-53.081-78.937-89.745
    c-0.231-0.485-0.025-1.065,0.46-1.296c0.484-0.233,1.065-0.025,1.296,0.46c17.284,36.337,44.337,67.095,78.235,88.946
    c34.803,22.435,75.186,34.293,116.784,34.293c11.55,0,23.139-0.919,34.445-2.733c0.526-0.087,1.029,0.275,1.114,0.806
    c0.085,0.53-0.276,1.029-0.806,1.114C241.123,434.629,229.431,435.556,217.778,435.556z"/>
    <path fill="none" d="M269.654,429.34l-0.461-1.889c30.629-7.484,59.825-21.988,84.433-41.944l1.225,1.511
    C330.021,407.152,300.56,421.787,269.654,429.34z"/>
    <path d="M361.996,380.637c-0.268,0-0.534-0.11-0.726-0.325c-0.357-0.401-0.322-1.015,0.079-1.373
    c45.924-40.941,72.264-99.682,72.264-161.161c0-15.731-1.701-31.424-5.054-46.646c-0.115-0.525,0.216-1.043,0.74-1.159
    c0.526-0.12,1.043,0.216,1.159,0.74c3.384,15.359,5.099,31.194,5.099,47.064c0,62.033-26.576,121.303-72.914,162.612
    C362.457,380.556,362.226,380.637,361.996,380.637z"/>
    <path fill="none" d="M423.026,150.825c-17.539-53.8-56.571-99.477-107.089-125.319l0.886-1.731
    c50.971,26.074,90.355,72.162,108.051,126.447L423.026,150.825z"/>
    <path d="M28.427,113.072c-0.16,0-0.323-0.04-0.474-0.124c-0.469-0.262-0.636-0.855-0.374-1.323C66.089,42.772,138.969,0,217.778,0
    c31.227,0,61.374,6.469,89.603,19.229c0.489,0.221,0.706,0.797,0.485,1.287c-0.221,0.489-0.797,0.706-1.287,0.485
    C278.605,8.356,248.727,1.945,217.778,1.945c-78.106,0-150.336,42.391-188.502,110.63
    C29.098,112.893,28.768,113.072,28.427,113.072z"/>
  </g>
</svg>

user_51574540
Related