CODEWITHSUNDEEP
htmlcsssvg
Naeem Shaikh
Naeem Shaikh

Reputation: 15715

Rotate a group of svgs together

I have this fiddle : http://jsfiddle.net/kjow9nhv/2/

<div class='draw'>

<svg id='parent' width="100" height="100">
    <circle stroke-dasharray="7,7" cx="45" cy="45" r="45" stroke="gray" stroke-width="3" fill="white"/>
</svg>
<svg id='first' width="50" height="50">
 <circle stroke-dasharray="7,7" cx="25" cy="25" r="20" stroke="black" stroke-width="3" fill="red"/>
</svg>

<svg id='second' width="50" height="50">
    <circle stroke-dasharray="7,7" cx="25" cy="25" r="20" stroke="black" stroke-width="3" fill="red"/>
</svg>

<svg width="75" height="50">
 <rect width="40" stroke-linecap="round" height="5" x="25" y="43" style="fill:yellow;stroke-width:1;stroke:yellow;" />
</svg>

</div>


@-webkit-keyframes rotateClockwiseAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-moz-keyframes rotateClockwiseAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotateClockwiseAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotateClockwiseAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
#first {
  -webkit-animation: rotateClockwiseAnimation 5s linear infinite;
  /* Safari 4+ */
  -moz-animation: rotateClockwiseAnimation 5s linear infinite;
  /* Fx 5+ */
  -o-animation: rotateClockwiseAnimation 5s linear infinite;
  /* Opera 12+ */
  animation: rotateClockwiseAnimation 5s linear infinite;
}
.draw svg {
  position: absolute;
}
#second {
  right: 0px;
}
#first,
#second {
  top: 20px;
}
div {
  width: 91px;
  position: relative;
}
#second {
  -webkit-animation: rotateAntiClockwiseAnimation 5s linear infinite;
  -moz-animation: rotateAntiClockwiseAnimation 5s linear infinite;
  -o-animation: rotateAntiClockwiseAnimation 5s linear infinite;
  animation: rotateAntiClockwiseAnimation 5s linear infinite;
}
@-webkit-keyframes rotateAntiClockwiseAnimation {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@-moz-keyframes rotateAntiClockwiseAnimation {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@-o-keyframes rotateAntiClockwiseAnimation {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes rotateAntiClockwiseAnimation {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
<div class='draw'>

  <svg id='parent' width="100" height="100">
    <circle stroke-dasharray="7,7" cx="45" cy="45" r="45" stroke="gray" stroke-width="3" fill="white" />

  </svg>
  <svg id='first' width="50" height="50">
    <circle stroke-dasharray="7,7" cx="25" cy="25" r="20" stroke="black" stroke-width="3" fill="red" />

  </svg>



  <svg id='second' width="50" height="50">
    <circle stroke-dasharray="7,7" cx="25" cy="25" r="20" stroke="black" stroke-width="3" fill="red" />

  </svg>


  <svg width="75" height="50">

    <rect width="40" stroke-linecap="round" height="5" x="25" y="43" style="fill:yellow;stroke-width:1;stroke:yellow;" />
  </svg>



</div>

As you can see there are two circles (RED) and one rectangle(YELLOW), the circles are rotating independently, and the rectangle joins the centers of the two circles.

Now, what I want to do is to rotate the group, (i.e. two circles, and the rectangle) together as a single unit, within the outer(grey) circle.

This is what I tried: http://jsfiddle.net/kjow9nhv/3/.. but doesnt work.

Upvotes: 0

Views: 99

Answers (1)

Karthi Keyan
Karthi Keyan

Reputation: 804

Find out the result: http://jsfiddle.net/vg2o4yya/

Put 

transform-origin: center;
width and height for the draw div

Upvotes: 3

Related Questions