为什么'transform-origin”在 Firefox 中的 SVG 组上不起作用，如何修复它？

SVG 组上的 Transform-Origin：Firefox 特定解决方案

在 Firefox 中，在 SVG 组上设置 Transform-Origin 是一项持久的操作问题，让开发人员感到困惑，为什么它看起来不起作用。为了解决这个问题，让我们深入研究一个已被证明有效的解决方案。

为了说明这个问题，请考虑以下 SVG 代码：

<svg>
  <g></g></svg>

Firefox 将忽略 transform-origin 属性，这意味着该组的变换不会发生在其预期中心周围。

解决此问题的关键在于修改 SVG 设计。不应在组内绘制形状，而应以使其中心与坐标原点 (0, 0) 对齐的方式创建形状。例如：

<svg>
  <rect></rect></svg>

在这种情况下，矩形的中心与坐标原点对齐。随后，您可以使用 CSS 创建过渡和动画，Firefox 将围绕组的中心正确执行这些过渡和动画。

例如，以下 CSS 片段将在 Firefox 中围绕其中心旋转组（和矩形）：

#myObject {
  transform: rotate(0deg);
  transition: all 1s linear;
}

.csstransforms.csstransitions.js-rotateObject #myObject {
  transform: rotate(360deg);
}

该解决方案有效解决了 Firefox 中的变换源问题，允许以 SVG 组为中心进行无缝变换。

以上是为什么'transform-origin”在 Firefox 中的 SVG 组上不起作用，如何修复它？的详细内容。更多信息请关注PHP中文网其他相关文章！