关于html：使用CSS3在其自身中心旋转SVG路径

Rotating a SVG path using CSS3 around its own center

我有一组SVG路径，其中一个如下：

1
2
3

我尝试使用以下代码进行旋转动画：

1
2
3
4
5
6
7
8
9
10
11

.stuck #GOL
{
fill: red;
transform: rotate(90deg);
}

#GOL
{
transition-property: all;
transition-duration: 2s;
}

问题在于路径绕着不规则的距离中心旋转。我希望它绕自己的中心旋转。我必须使用CSS3(因此不能使用svg自己的rotate()函数)。

相关讨论

通过使用嵌套转换，可以避免使用transform-origin及其相关的浏览器问题。

基本思想是将路径的旋转中心转换为SVG的原点(左上)，然后进行旋转并将其转换回其原始位置。您可以使用嵌套组来实现。

胎冠形状的中心大约为(22，432)。所以我们可以做：

1
2
3
4
5

<g transform="translate(22 432)"> // translate everything to the path's original position
<g transform="rotate(90deg)"> // rotate (around the origin)
<path transform="translate(-22 -432)"/> // shift path to the origin
</g>
</g>

读取从内部(路径)到最外部组的转换。

下面的演示：

1
2
3
4
5
6
7
8
9
10
11

#GOL
{
fill: red;
transform: rotate(90deg);
}

#GOL
{
transition-property: all;
transition-duration: 2s;
}

1
2
3
4
5
6
7
8
9
10
11

您是否尝试过在CSS中使用transform-origin？

1	transform-origin: 50% 50%;

这将从选择器的中间开始任何转换。