在SVG组上设置转换原点在Firefox中不起作用

小编典典

在SVG组上设置转换原点在Firefox中不起作用

html

我在使转换原点在Firefox（v.18
+，未测试的其他版本）中工作时遇到问题。Webkit浏览器可以正常工作。我正在尝试将原点设置为组的中心，但到目前为止我没有尝试过。

这是代码：

#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);

  }

}


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

阅读 336

2020-05-10

共1个答案

小编典典

我试图使用CSS过渡围绕其中心点旋转一个简单的齿轮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转换（我根据用户操作（js- rotateObject）使用JavaScript将类添加到HTML标记，并使用Minimizr检查浏览器是否可以处理转换和转换（.csstransforms.csstransitions）：

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

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

希望能有所帮助。

2020-05-10