为什么'transform-origin”在 Firefox 中的 SVG 组上无法正常工作？

解决 Firefox 的 SVG 组中的变换原点问题

问题陈述

在 SVG 组上设置变换原点在 Firefox 中似乎没有任何效果。虽然这在 Webkit 浏览器中按预期工作，但在 Firefox 中使用时，转换原点无法正确对齐。

代码示例

#test {
  -webkit-transform-origin: 50% 50%;
  transform-origin: center center;
 ...
}

解决方案

为了解决这个问题，建议以坐标为中心绘制原始SVG形状(0, 0)。这涉及到移动形状的原点以与预期的变换原点正确对齐。

修订的 SVG

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

通过将形状的中心放置在 ( 0, 0)，现在可以正确应用变换原点，从而在 Firefox 中实现所需的变换行为。

以上是为什么'transform-origin”在 Firefox 中的 SVG 组上无法正常工作？的详细内容。更多信息请关注PHP中文网其他相关文章！