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

Susan Sarandon

发布： 2024-12-02 06:24:10

原创

538 人浏览过

Why Doesn't `transform-origin` Work Correctly on SVG Groups in Firefox?

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

登录后复制

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

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

来源：php.cn

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

作者最新文章