在SVG组上设置transform-origin不在FireFox中工作

Question

我有一个问题,让transform-origin在Firefox中运行(v.18 +,其他版本没有经过测试).Webkit浏览器按预期工作.

我试图将原点设置为群组的中心,但到目前为止我没有尝试过任何工作.

这是代码:

<!DOCTYPE html>
<html> 
    <head>
        <title>TEST</title>
        <style>
            #test{
                -webkit-transform-origin: 50% 50%;
                transform-origin: center center;

                -webkit-animation: prop 2s infinite;
                animation:         prop 2s infinite;
            }

            @-webkit-keyframes prop {
              0%    { -webkit-transform: scale(1,1);}
              20%   { -webkit-transform: scale(1,.8);}
              40%   { -webkit-transform: scale(1,.6);}
              50%   { -webkit-transform: scale(1,.4);}
              60%   { -webkit-transform: scale(1,.2);}
              70%   { -webkit-transform: scale(1,.4);}
              80%   { -webkit-transform: scale(1,.6);}
              90%   { -webkit-transform: scale(1,.8);}
              100%  { -webkit-transform: scale(1,1);}
            }

            @keyframes prop {
              0%    { transform: matrix(1, 0, 0, 1, 0, 0);}
              20%   { transform: matrix(1, 0, 0, .8, 0, 0);}
              40%   { transform: matrix(1, 0, 0, .6, 0, 0);}
              50%   { transform: matrix(1, 0, 0, .4, 0, 0);}
              60%   { transform: matrix(1, 0, 0, .2, 0, 0);}
              70%   { transform: matrix(1, 0, 0, .4, 0, 0);}
              80%   { transform: matrix(1, 0, 0, .6, 0, 0);}
              90%   { transform: matrix(1, 0, 0, .8, 0, 0);}
              100%  { transform: matrix(1, 0, 0, 1, 0, 0);}
            }
        </style>
    </head>
    <body>
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128px" height="128px" viewBox="0 0 16 16">
            <g id="test">
                <rect fill="#404040" x="7.062" y="3.625" width="1.875" height="8.75"/>
            </g>
        </svg>
    </body>
</html>

谢谢你的帮助!

Answer 1

我试图使用CSS过渡围绕其中心点旋转一个简单的cog svg图形.我和Firefox有同样的问题; 变换起源似乎没有效果.

解决方案是绘制原始的svg形状,使其中心位于坐标0,0处:

<svg x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400">
    <rect id="myObject" x="-50" y="-50" fill="#E52420" width="100" height="100"/>
</svg>

然后在它周围添加一个组并转换到您想要的位置:

<svg x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400">
    <g transform="translate(150, 100)">
        <rect id="myObject" x="-50" y="-50" fill="#E52420" width="100" height="100"/>
    </g>
</svg>

现在你可以应用应该在Firefox中工作的css转换(我使用JavaScript基于用户操作(js-rotateObject)添加一个类到HTML标记,并使用Minimizr检查浏览器是否可以处理转换和转换(.csstransforms.csstransitions):

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

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

希望有所帮助.

Answer 2

从Firefox 55(2017年8月8日发布)开始,现在支持"transform-b​​ox"CSS属性.将其设置为"fill-box"将模仿Chrome相对于SVG树中的transform-origin.

transform-origin: center; /* or transform-origin: 50% */
transform-box: fill-box;

更新2017-9-14

您可以在SVG结构中选择所需的元素,或者如Tom在注释中指出的那样,您只需将其应用于SVG元素的所有后代(只要样式不会干扰您尝试的任何其他内容)实现):

svg .my-transformed-element {
    transform-origin: center; /* or transform-origin: 50% */
    transform-box: fill-box;
}

要么

svg * {
    transform-origin: center; /* or transform-origin: 50% */
    transform-box: fill-box;
}

Answer 3

@ PatrickGrey的回答对我来说非常合适,但是我需要处理一个更复杂的SVG,它有几条路径.我能够使用Inkscape完成此修复,但这是一个多步骤的过程.我建议在打开Inkscape XML编辑器的情况下执行此操作,以便您可以观察正在发生的事情.

1. 选择要转换的元素,然后选择" 对象">"组"以创建新组.拖动该组,使其位于文档左上角的中心位置.这transform="translate(…, …)"会将属性应用于组.

2. 从菜单中选择" 对象">"取消组合 ".这将"展平"变换属性,将任何坐标变换应用于组中的元素.

3. 仍应选择原始元素.选择" 对象">"组"将它们放回组中.如果您正在使用CSS来转换元素,请将您的ID或class属性添加到此组(XML编辑器可以为这一点派上用场,或者您可以通过右键单击它并选择对象属性来修改组的ID .类需要是通过XML编辑器或稍后在文本编辑器中添加.)

4. 选择组后,再次选择" 对象">"组".这会在原始组周围创建一个新组.

5. 将此新组拖到文档中的正确位置.如果使用XML编辑器检查DOM,您将看到transform="translate(…, …)"已添加到外部组.

6. 任何CSS转换现在都可以应用于内部组,Chrome和Firefox将一致地处理它们.

感谢@ PatrickGrey.co.uk的初步见解.最棘手的部分是弄清楚如何将初始变换应用于复杂对象的坐标,而无需借助拔毛和大量的数学运算.StackOverflow上的一些地方记录了"Group,move,Ungroup"技巧,但直到今天我才忘记它.希望这些步骤可以为其他人带来相当多的悲伤.

Answer 4

根据此错误报告中的评论，Firefox 的默认值transform-box与 Chrome 的不同。从 Firefox 55 开始，现在可以在不设置标志的情况下设置此属性。

这为我解决了问题：

transform-box: fill-box;
transform-origin: center center;