我有一个包含一个圆组和一个文本组的svg图像。圆组由多个点组成。此“圈子”组应绕其圈子中心旋转,但仍围绕svg的左上角旋转。为了解决这个问题,我在各处进行了搜索,但是如果不将圆组放置在完全错误的位置上,就无法更改该圆的旋转中心。
所以我的问题是:如何在不更改组位置的情况下定义svg图像组的旋转中心?
这是我正在使用的代码:https : //jsfiddle.net/1pe2c837/1/
svg {
width: 50%;
}
/* Rotate around the circle center */
#Circleelement {
-webkit-animation-name: rotate;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: rotate;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@-webkit-keyframes rotate {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes rotate {
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(360deg);}
}
@keyframes rotate {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
/* _x31_ */
#_x31_, #_x32_7, …Run Code Online (Sandbox Code Playgroud)