我有这个小提琴: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/ ..但不起作用。
答案 0 :(得分:3)