html - 一起旋转一组 svg

Question

我有这个 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>

如您所见，有两个圆(红色)和一个矩形(黄色)，圆独立旋转，矩形连接两个圆的中心。

现在，我想要做的是在外部(灰色)圆圈内将组(即两个圆圈和矩形)作为一个整体旋转。

这是我试过的:http://jsfiddle.net/kjow9nhv/3/ .. 但不起作用。

Answer 1

找出结果:http://jsfiddle.net/vg2o4yya/

放

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