小编Ste*_*fan的帖子

SVG动画围绕其中心旋转组

我有一个包含一个圆组和一个文本组的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)

css svg rotation centering

6
推荐指数
3
解决办法
7220
查看次数

标签 统计

centering ×1

css ×1

rotation ×1

svg ×1