使用 CSS3 围绕自己的中心旋转 SVG 路径

Posted 2023-03-06

【中文标题】使用 CSS3 围绕自己的中心旋转 SVG 路径

【英文标题】：Rotating a SVG path using CSS3 around its own center

【发布时间】：2017-05-04 15:51:21

【问题描述】：

我有一组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() 函数）。

【问题讨论】：

您可能需要 JS 来确定路径形状的中心。

无法使用 CSS 确定它？

No..CSS 不能“检测”任何东西。你可以试试transform-origin: 50% 50%，但我记得这不一定支持跨浏览器，可能不是你真正想要的。一个演示在这里可能会有一些用处。

.stuck 在这种情况下做了什么？它是什么元素？

更具体地说，您可以通过 CSS 指定旋转中心（使用 transform-origin）。 CSS 不能为您做的是自己找到“中心”，您必须通过其他方式找到这些值。

【参考方案1】：

您可以通过使用嵌套转换来避免使用 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  >

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

【参考方案2】：

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

transform-origin: 50% 50%;

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

【讨论】：

其实transform-origin的默认值已经是50% 50% 0了，和MDN一样。

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

确认不重复不在 chrome 64 和 Firefox 58 中工作。这适用于 DOM 元素，但不适用于 SVG 元素。这在旧版本中也适用于 SVG 元素。

@MartinMeeser 有什么方法可以进行这种轮换吗？