将一组svg旋转在一起
将一组svg旋转在一起
提问于 2015-02-25 11:47:37
我有个小提琴：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/..。但不起作用。
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-02-25 12:04:51
查找结果：http://jsfiddle.net/vg2o4yya/
放
transform-origin: center;
width and height for the draw div页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28718256
复制相关文章
相似问题
腾讯云开发者
