Rotating a SVG circle with group element

Question

I'd like to rotate a SVG circle while keeping the other elements from rotating

when I am trying to rotate the circle(white color) by using rotateZ(15deg), this is what I got:

This is my progress so far: https://jsfiddle.net/41hrnojs/

I'd like to achieve

The circle(white color) rotate while clicking the dots on the white
circle

user_7897395 · Answer

Instead of rotating everything I would calculate the position of the dots on the circle and use the coordinates of the dots to draw the line and the text.

For this I'm using javascript. The most important part in the script is a function used to calculate the new position of the rotated point: rotatePoint(p, c, rot)

Please observe that in the svg I've eliminated useless transformations.

let theG = document.querySelector("#theG");
//the center of the circle
let center = { x: 700, y: -40 };
//thr rotation in radians
let rot = .6;
//a  function to calculate the new position of a rotated point
function rotatePoint(p, c, rot) {
  // p: the point
  // c: the center of rotation
  // rot: the rotation
  let cos = Math.cos(rot);
  let sin = Math.sin(rot);
  return {
    x: c.x + (p.x - c.x) * cos - (p.y - c.y) * sin,
    y: c.y + (p.x - c.x) * sin + (p.y - c.y) * cos
  };
}


//all the groups with a class of dot
let groups = theG.querySelectorAll(".dot");
let points = [];

groups.forEach((g) => {
  let dot = g.querySelector("circle");
  let p = {};

  p.x = dot.getAttribute("cx");
  p.y = dot.getAttribute("cy");
  
  points.push(p)
});


itr.addEventListener("input",()=>{
  
let rot = itr.value;

groups.forEach((g,i) => {
  
  let dot = g.querySelector("circle");
  let line = g.querySelector("line");
  let t1 = g.querySelectorAll("text")[0];

  let newPoint = rotatePoint(points[i], center, rot);

  dot.setAttribute("cx", newPoint.x);
  dot.setAttribute("cy", newPoint.y);

  line.setAttribute("x1", newPoint.x);
  line.setAttribute("x2", newPoint.x);
  line.setAttribute("y1", newPoint.y);
  line.setAttribute("y2", newPoint.y + 180);

  t1.setAttribute("x", newPoint.x);
  t1.setAttribute("y", newPoint.y + 200);

});
  
});

input{width:90vw;}
p{text-align:center;}
text{text-anchor:middle}

line{stroke:#000; stroke-width:1px; }

user_7897395 · Answer

I was wondering if it can be done without javascript. In the next demo I'm using javascript just in order to change the rotation value.

Since I'm using svg transforms the angles are in degs not in radians.

The main idea is this: I'm creating a nested svg element. While I'm rotating theG in one direction I need to rotate the line and the text the same number of degrees in the opposite direction. The problem is that while rotating theG, the dots are changing the position and I need to know that position to use it as a hub for the line and the text.

The solution is to put everything in a nested svg where everything stays in the same position and rotate the nested svg. As it comes out in SVG 1.1, the element did not allow the transform attribute. So I've putted every nested svg in a group and rotated the group instead.

itr.addEventListener("input",()=>{
 
let rot = itr.value;
theG.setAttribute("transform",`rotate(${rot} 700 -40)`) 
dot2006.setAttribute("transform",`rotate(${-rot} 302 480)`); 
dot2007.setAttribute("transform",`rotate(${-rot} 700 600)`);
dot2008.setAttribute("transform",`rotate(${-rot} 1100 480)`);  
});

input{width:90vw;}
p{text-align:center;}
text{text-anchor:middle; font-family:'Playfair Display' serif; font-size:2em; font-weight:bold; fill:#9d9e9f;}

line{stroke:#000; stroke-width:1px; }

Rotating a SVG circle with group element

2 Answers