为什么 SVG 组'transform-origin”在 Firefox 中没有按预期工作，如何修复它？

Firefox 中的 SVG 组变换源问题：解决方案

Firefox 用户在 SVG 组上使用变换源时可能会遇到困难。尽管尝试将原点居中，但所需的转变仍然难以实现。此问题源于 Firefox 中独特的 SVG 绘制风格。

要解决此问题，请以原点 (0, 0) 为中心绘制 SVG 形状：

<svg x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400">
    <rect>

下一步，将形状包含在一个组中并将其转换到所需的位置：

<svg x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400">
    <g transform="translate(150, 100)">
        <rect>

现在，CSS 过渡可以应用于该组，包括变换原点，并且应该在 Firefox 中正常运行：

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

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

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