在 Chrome 中工作的 SVG 上 CSS 动画的 transform-origin，而不是 FF

Posted 2023-03-06

【中文标题】在 Chrome 中工作的 SVG 上 CSS 动画的 transform-origin，而不是 FF

【英文标题】：transform-origin for CSS animation on SVG working in Chrome, not FF

【发布时间】：2013-09-27 02:44:56

【问题描述】：

我正在尝试使用 CSS 和 SVG 创建一个简单的动画：旋转齿轮。动画在 Chrome 但不是 Firefox 中完美运行。以下是实际代码：http://jsfiddle.net/fL8Qn/

齿轮是 SVG 文件中的路径：

<div class="svg">
    <svg x="0px" y="0px"   viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
    <title>PDP</title>
    <text x="44" y="120" class="gear_text">PDP</text>
    <g transform="translate(50%, 50%)">
        <path id="gear1" class="gear go-clockwise" x="0px" y="0px" d="m91.63252,0l-4.16735,23.73752l0.01604,0.01606c-5.09374,0.83228 -10.02215,2.16622 -14.72963,3.9428l0,-0.01584l-15.46727,-18.48038l-14.53742,8.39871l8.25439,22.63163l0.03211,0.01585c-3.9412,3.23531 -7.55353,6.86028 -10.78684,10.8031l-0.01604,-0.04816l-22.63164,-8.25463l-8.39871,14.53743l18.48035,15.48333c-1.77354,4.70347 -3.09585,9.62447 -3.92695,14.71362l-0.01604,-0.01586l-23.73753,4.16734l0,16.79736l23.73753,4.16735l0.01604,-0.01587c0.83109,5.08915 2.15341,10.01014 3.92695,14.71381l-18.48035,15.48312l8.39871,14.53743l22.63164,-8.25444l0.01604,-0.04832c3.23331,3.94261 6.84564,7.56799 10.78684,10.80287l-0.03211,0.0159l-8.25439,22.63168l14.53742,8.39873l15.46727,-18.48027l0,-0.01582c4.70748,1.77637 9.63589,3.11047 14.72963,3.94278l-0.01604,0.01587l4.16735,23.73772l16.78132,0l4.16733,-23.73772l-0.01603,-0.01587c5.09294,-0.83009 10.02274,-2.15297 14.72985,-3.92696l15.4831,18.48047l14.53743,-8.39871l-8.27046,-22.63173c3.93234,-3.22687 7.54289,-6.83942 10.771,-10.7708l22.64757,8.25439l8.38263,-14.53741l-18.4642,-15.48308c1.77402,-4.70432 3.11153,-9.62388 3.94283,-14.71384l23.73775,-4.15126l0,-16.79738l-23.73775,-4.16735c-0.83148,-5.08432 -2.17067,-9.99828 -3.94283,-14.69775l18.4642,-15.4831l-8.38263,-14.53745l-22.64757,8.25443c-3.2281,-3.93136 -6.83842,-7.54391 -10.771,-10.77079l8.27046,-22.63168l-14.53743,-8.39871l-15.4831,18.48042c-4.70711,-1.77378 -9.63691,-3.09688 -14.72985,-3.92696l0.01603,-0.01586l-4.16733,-23.73761l-16.78132,0l0,-0.00011l0,0zm8.39869,40.8716c32.67677,0 59.17564,26.48283 59.17564,59.1596c0,32.67677 -26.49887,59.15962 -59.17564,59.15962c-32.67677,0 -59.15962,-26.48285 -59.15962,-59.15962c0,-32.67677 26.48286,-59.1596 59.15962,-59.1596z" stroke-dashoffset="0" stroke-miterlimit="4" stroke-linejoin="round" stroke-linecap="round" stroke-/>
    </g>
</svg>

并且动画是使用 CSS 应用的：

.svg 
  width:200px;
  height:200px;
  float:left;
  position: fixed;
  top: 20px;
  left: 50px;


.go-clockwise 
  -webkit-animation: clockwise 3s infinite linear;
  -moz-animation: clockwise 3s infinite linear;


.go-counter-clockwise 
  -webkit-animation: counter-clockwise 3s infinite linear;
  -moz-animation: counter-clockwise 3s infinite linear;

path.gear
  fill: #3f3f3f;

text.gear_text
  font-size: 55px;
  font-weight: 900;
  fill: #3f3f3f;


@-webkit-keyframes clockwise 
  0% 
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    transform-origin: center center;

  

  100% 
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    transform-origin: center center;

  


@-moz-keyframes clockwise 
  0% 
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    transform-origin: center center;

  

  100% 
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    transform-origin: center center;

  


@-webkit-keyframes counter-clockwise 
  0% 
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    transform-origin: center center;

  

  100% 
    -webkit-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    transform: rotate(-360deg);
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    transform-origin: center center;

  


@-moz-keyframes counter-clockwise 
  0% 
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    transform-origin: center center;

  

  100% 
    -webkit-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    transform: rotate(-360deg);
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    transform-origin: center center;
  

使用 CSS 是首选方法，因为我正在动态应用该类。 （向下滚动时逆时针，向上滚动时顺时针）但出于这个问题的目的，我只是应用一个类。 Chrome 可以很好地呈现它，但 Firefox 似乎没有使用 -moz-transform-origin 属性。无论我使用什么，firefox 似乎都在应用从 (0,0) 的原点进行的转换，而 Chrome 使用了 transform-origin 属性并正常工作。

我已经尝试了几乎所有我能找到的东西。有人有什么想法吗？

【参考方案1】：

我有一个工作示例：

http://jsfiddle.net/4h3xL/1/

this answer 的问题在于 x="" 和 y="" 属性不适用于所有 svg 元素，在您的情况下，它们在 text 元素上有效，但在 path 上无效。

我的回答涉及 css transform: translate()。当您尝试在同一元素上运行动画时，这些值（连同内联 path 属性 transform="translate()"）会被重置，因为动画也是一个变换 - transform: rotate()。我试图将平移链接到旋转上，但这奇怪地在 FF 中也不起作用。

我将路径包裹在两个g 中。路径和外部组用于偏移/重置对齐，中间用于动画。

【讨论】：

我也找到了这个答案，但我不知道如何使用它来解决问题。在小提琴中，您会看到我在 元素周围添加了 以尝试使修复工作。我也尝试过像素值。无论我尝试什么，路径总是围绕它的 (0,0) 原点旋转。你有工作的例子吗？

现在没时间创建演示，但您应该尝试翻译(-50% -50%)

嘿，更新了我的 jsfiddle 链接，发现它没有正确保存

做到了！在我看来仍然很复杂，但公平地说 svg 和 css 动画似乎很先进。谢谢！

是的，令人费解的是正确的。我尝试了许多其他选项，但最后额外的 g 标签就可以了。最糟糕的是您不能在 svg 中使用百分比翻译，因此无法响应。

【参考方案2】：

似乎 Firefox 有一个“问题”，将 CSS 动画分配给 <svg> 内的 <path> 元素。

如果更新了您的jsFiddle 并且只是将类属性从<path> 移动到<svg>。然后它按预期工作（除了文本现在也旋转）。

您也可以在 SVG 文件中使用 <animateTransform>。

见DEMO

【讨论】：

感谢您的提示。 animateTransoform 看起来可以工作，但我可以通过编程方式启用/禁用或添加/删除它吗？最初的想法是徽标只会在页面滚动时旋转，我使用javascript添加包含动画的类并在滚动停止时将其删除。