SVG Won't Rotate Correctly

Question

My SVG is rotating from a point on the right of the actual SVG I would like it to rotate from the center of the SVG. I have tried transform-origin: 50% 50%; and that did not work. I have also messed with all of the other settings to no prevail.

Here is my current code:

body {
  background-color: black;
}

.rotate {
  animation: rotation 8s infinite linear;
  opacity: 1;
  width: 1400px;
  position: absolute;
  top: -70px;
  right: -195px;
}

.rotate:hover {
  opacity: 1;
  transition: 0.4s
}

.rotate svg {
  transform-origin: center;
}

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

user_7394871 · Answer

To achieve the rotation of the circle with the text without horizontal displacements, you need to find the correct center of rotation

To do this, I wrapped path and text in a group tag and using the JS method getBBox() calculated the center of rotation

let bb = circ.getBBox();

console.log(bb.x + bb.width / 2)
console.log(bb.y + bb.height / 2)

We got the coordinates x ~= 564.2px y ~=359.1px

Substitute these values into the values of the animation command animateTransform

Please open full screen
Animation will start after clicking.

If you want to start the animation without clicking, instead of begin ="svg1.click" write begin ="0s"

;
  let bb = circ.getBBox();

console.log(bb.x + bb.width / 2);
console.log(bb.y + bb.height / 2);
;

body {
  background-color: black;
}

.rotate {
 
  opacity: 1;
  width: 1400px;
  position: absolute;
 }

.rotate:hover {
  opacity: 1;
  transition: 0.4s
}

Upd

As a bonus

Forward-backward rotation on repeated clicks

Add a second animation that rotates the caption in the opposite direction

The JS script switches from the first clockwise rotation animation to the second counterclockwise rotation animation:

var svg_1 = document.getElementById("svg1"),
  forward = document.getElementById('forward'),
  back = document.getElementById("back");

let flag = true;

svg_1.addEventListener('click', function() {
  if (flag == true) {
    forward.beginElement();
    flag = false;
  } else {
    back.beginElement();
    flag = true;
  }
});

body {
  background-color: black;
}

.rotate {
 
  opacity: 1;
  width: 1400px;
  position: absolute;
 }

.rotate:hover {
  opacity: 1;
  transition: 0.4s
}

user_13669087 · Answer

Here's small snippet that might help add some clarification/value. Possibly a case of the SVG not being centred in the container div with the class .rotate. Below are two examples indicating the behaviour when the SVG is centred and is not centred in the container. Alternatively, you can rotate the SVG if your intended rotation point is the centre of the path/SVG. The grey square divs in this example serve as the containers. Press the Run code snippet button below to see the results (not supported in mobile app):

#Container_1,
#Container_2 {
  position: absolute;
  --Size: 120px;
  width: var(--Size);
  height: var(--Size);
  top: calc(50% - var(--Size)/2);
  background: rgba(0, 0, 0, 0.02);
}

#Container_1 {
  left: calc(30% - var(--Size)/2);
}

#Container_2 {
  left: calc(70% - var(--Size)/2);
}

#Instagram_SVG_1 {
  position: relative;
  --Size: 50%;
  width: var(--Size);
  height: var(--Size);
  top: calc(50% - var(--Size)/2);
  left: calc(50% - var(--Size)/2);
}

#Instagram_SVG_2 {
  position: relative;
  --Size: 50%;
  width: var(--Size);
  height: var(--Size);
  top: calc(70% - var(--Size)/2);
  left: calc(70% - var(--Size)/2);
}

.rotate {
  animation: rotation 8s infinite linear;
}

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

SVG Won't Rotate Correctly

2 Answers