使用CSS3围绕其自身中心旋转SVG路径

Question

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

<path id="GOL" class="st0" d="M37.5,430.5l-12.4-12.4v-13.3h-4.2c-7.2,0-13.9,2.5-18.7,7.5c-4.7,4.9-7.3,11.3-7.3,18.3
    c0,7,2.6,13.5,7.3,18.3c4.8,5,11.4,7.6,18.6,7.6l4.2,0v-13.7L36.7,430.5z M19.7,435.3l-4.9-4.9l4.9-4.9l4.9,4.9L19.7,435.3z
     M2.4,430.5c0-8.4,5.6-15.1,13.1-16.9v3.8L2.4,430.5l13.1,13.1v3.8C8,445.6,2.4,438.9,2.4,00.5z"></path>

我试图使用以下代码制作旋转动画：

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

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

问题在于路径围绕一个不规则的距离中心旋转。我希望它围绕自己的中心旋转。我必须使用CSS3（因此无法使用SVG的rotate()函数）。

- Mostafa Talebi

---

你可能需要使用JS来确定路径形状的中心。 - Paulie_D

无法使用CSS确定它吗？ - Mostafa Talebi

不，CSS 无法“检测”任何内容。您可以尝试使用 transform-origin: 50% 50%，但我记得它并非跨浏览器支持，并且可能并非您真正想要的效果。在这里，演示可能会有所帮助。 - Paulie_D

在这个上下文中，.stuck 是什么作用？它是什么类型的元素？ - roberrrt-s

更具体地说，您可以通过CSS（使用transform-origin）指定旋转中心。但是CSS无法自动找到“中心”，您需要通过其他方式找到这些值。 - jcaron

Answer 1

你尝试过在你的CSS中使用transform-origin吗？

transform-origin: 50% 50%;

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

- Stewartside

---

实际上，transform-origin 的默认值已经是 50% 50% 0，详见 MDN。 - MateBoy

但是50% 50%的含义在不同的浏览器中有所不同。因为规范已经改变，Chrome现在做了“错误”的事情。目前，使用绝对坐标更安全。即transfer-origin: 100px 100px。 - Paul LeBeau

确认在 Chrome 64 和 Firefox 58 中未能工作，这对于 DOM 元素有效，但对于 SVG 元素无效。在早期版本中，这也适用于 SVG 元素。 - Martin Meeser

@MartinMeeser 有什么方法可以进行旋转吗？ - k102

Answer 2

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

基本思路是将路径的旋转中心转换为SVG的原点（左上角），进行旋转并将其恢复到原始位置。您可以使用嵌套组来实现此操作。

您的皇冠形状的中心大约在（22，432）处。所以我们可以这样做：

<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>

从内部（路径）到最外层组读取变换。

以下是演示：

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

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

<svg width="500" height="500">

  <g transform="translate(22 432)">
    <g id="GOL">
      <path class="st0" d="M37.5,430.5l-12.4-12.4v-13.3h-4.2c-7.2,0-13.9,2.5-18.7,7.5c-4.7,4.9-7.3,11.3-7.3,18.3
    c0,7,2.6,13.5,7.3,18.3c4.8,5,11.4,7.6,18.6,7.6l4.2,0v-13.7L36.7,430.5z M19.7,435.3l-4.9-4.9l4.9-4.9l4.9,4.9L19.7,435.3z
     M2.4,430.5c0-8.4,5.6-15.1,13.1-16.9v3.8L2.4,430.5l13.1,13.1v3.8C8,445.6,2.4,438.9,2.4,00.5z"
        transform="translate(-22 -432)"></path>
    </g>
  </g>
</svg>

- Paul LeBeau