Question

尝试使用跨浏览器的SVG / CSS动画。我知道this firefox bug，但奇怪的是使用transform-box: fill-box;解决了一个实例中的问题，而不是另一个实例。

请参阅小提琴here，一个齿轮从中心正确旋转，而第二个齿轮没有旋转（仅在Firefox，Chrome和Safari中正常工作）。

-

我使用以下CSS结构：

#gear-large {
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  transform-box: fill-box;
  animation: spin 9.905s linear infinite;
}

转换包含<g>的<path>组：

<g id="gear-large">
 <path d="M110.8,68.5l4.9-2.4a.9.9,0,0,0,.5-1l-.8-4.3a.9.9,0,0,0-.8-.7l-5.4-.6a.9.9,0,0,1-.7-.6,32.7,32.7,0,0,0-1.6-3.7.9.9,0,0,1,.1-.9l3.4-4.3a.9.9,0,0,0,0-1.1l-2.5-3.5a.9.9,0,0,0-1-.3l-5.1,1.8a.9.9,0,0,1-.9-.2,32.2,32.2,0,0,0-3.1-2.8.9.9,0,0,1-.3-.9l1.1-5.3a.9.9,0,0,0-.4-1l-3.8-2.1a.9.9,0,0,0-1.1.2l-3.8,3.8a.9.9,0,0,1-.9.2l-4-1.1a.9.9,0,0,1-.7-.7l-1.2-5.2a.9.9,0,0,0-.8-.7L77.4,31a.9.9,0,0,0-.9.6l-1.7,5a.9.9,0,0,1-.7.6l-4.1.7a.9.9,0,0,1-.9-.3l-3.3-4.1a.9.9,0,0,0-1-.3l-4,1.7a.9.9,0,0,0-.5.9l.6,5.2a.9.9,0,0,1-.4.9,32.7,32.7,0,0,0-3.4,2.5.9.9,0,0,1-.9.1l-4.7-2.2a.9.9,0,0,0-1,.2l-2.9,3.3a.9.9,0,0,0-.1,1.1L50,51.2a.9.9,0,0,1,0,1l-1.1,1.9-.9,1.9a.9.9,0,0,1-.8.5H41.9a.9.9,0,0,0-.8.6l-1.2,4.2a.9.9,0,0,0,.4,1l4.4,2.8a.9.9,0,0,1,.4.9,32.5,32.5,0,0,0-.2,4.2.9.9,0,0,1-.5.8l-4.7,2.3a.9.9,0,0,0-.5,1l.8,4.3a.9.9,0,0,0,.8.7l5.2.6a.9.9,0,0,1,.7.6,33,33,0,0,0,1.6,3.9.9.9,0,0,1-.1.9L45,89.4a.9.9,0,0,0,0,1.1L47.6,94a.9.9,0,0,0,1,.3l5-1.8a.9.9,0,0,1,.9.2,32.2,32.2,0,0,0,3.2,2.8.9.9,0,0,1,.3.9l-1.1,5.2a.9.9,0,0,0,.4,1l3.8,2.1a.9.9,0,0,0,1.1-.2l3.8-3.8a.9.9,0,0,1,.9-.2l4,1.1a.9.9,0,0,1,.7.7l1.2,5.2a.9.9,0,0,0,.8.7l4.3.2a.9.9,0,0,0,.9-.6l1.8-5.1a.9.9,0,0,1,.7-.6l4-.7a.9.9,0,0,1,.9.3l3.4,4.2a.9.9,0,0,0,1,.3l4-1.7a.9.9,0,0,0,.5-.9l-.6-5.4a.9.9,0,0,1,.4-.9A32.4,32.4,0,0,0,98.4,95a.9.9,0,0,1,.9-.1l4.9,2.3a.9.9,0,0,0,1-.2l2.9-3.3a.9.9,0,0,0,.1-1.1L105.3,88a.9.9,0,0,1,0-.9l1-1.7.9-1.8a.9.9,0,0,1,.8-.5h5.5a.9.9,0,0,0,.8-.6l1.2-4.2a.9.9,0,0,0-.4-1l-4.6-2.9a.9.9,0,0,1-.4-.9,32.2,32.2,0,0,0,.2-4A.9.9,0,0,1,110.8,68.5ZM92.7,77.1a16.1,16.1,0,1,1-6.5-21.9A16.1,16.1,0,0,1,92.7,77.1Z" transform="translate(-0.3)" fill="none" stroke="#00b7d6" stroke-miterlimit="10" stroke-width="2.4" fill-rule="evenodd"/>
</g>

Answer 1

如果您希望transform-origin跨浏览器工作，则无法使用百分比值。 Chrome解释百分比值的方式已过时，并且不符合当前规范。

现在的修复方法是使用绝对坐标。

即使您对仅使用Chrome感到满意，但当Chrome修复其行为时，您的SVG可能会在未来中断。

＆＃13;

#gear-large {
  -webkit-transform-origin: 77.7px 69.7px;
  -moz-transform-origin: 77.7px 69.7px;
  transform-origin: 77.7px 69.7px;
  transform-box: fill-box;
  animation: spin 9.905s linear infinite;
    fill: #FAFAFA;
  stroke: #00b7d6;
  stroke-miterlimit:10;
  stroke-width: 2.4;
  fill-rule: evenodd;
    transform: rotate(0deg);
}

#gear-small {
  -webkit-transform-origin: 29.75px 32.85px;
  -moz-transform-origin: 29.75px 32.85px;
  transform-origin: 29.75px 32.85px;
  transform-box: fill-box;
  animation: spin-reverse 5.66s linear infinite;
}

@keyframes spin {
  
  0% {
      -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    
    
  }
}



@keyframes spin-reverse {
  100% {
    -moz-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}

＆＃13;

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="437" height="285" viewBox="0 0 437 285">

<g id="gear-large-wrapper">
    <g id="gear-large">
     <path d="M110.8,68.5l4.9-2.4a.9.9,0,0,0,.5-1l-.8-4.3a.9.9,0,0,0-.8-.7l-5.4-.6a.9.9,0,0,1-.7-.6,32.7,32.7,0,0,0-1.6-3.7.9.9,0,0,1,.1-.9l3.4-4.3a.9.9,0,0,0,0-1.1l-2.5-3.5a.9.9,0,0,0-1-.3l-5.1,1.8a.9.9,0,0,1-.9-.2,32.2,32.2,0,0,0-3.1-2.8.9.9,0,0,1-.3-.9l1.1-5.3a.9.9,0,0,0-.4-1l-3.8-2.1a.9.9,0,0,0-1.1.2l-3.8,3.8a.9.9,0,0,1-.9.2l-4-1.1a.9.9,0,0,1-.7-.7l-1.2-5.2a.9.9,0,0,0-.8-.7L77.4,31a.9.9,0,0,0-.9.6l-1.7,5a.9.9,0,0,1-.7.6l-4.1.7a.9.9,0,0,1-.9-.3l-3.3-4.1a.9.9,0,0,0-1-.3l-4,1.7a.9.9,0,0,0-.5.9l.6,5.2a.9.9,0,0,1-.4.9,32.7,32.7,0,0,0-3.4,2.5.9.9,0,0,1-.9.1l-4.7-2.2a.9.9,0,0,0-1,.2l-2.9,3.3a.9.9,0,0,0-.1,1.1L50,51.2a.9.9,0,0,1,0,1l-1.1,1.9-.9,1.9a.9.9,0,0,1-.8.5H41.9a.9.9,0,0,0-.8.6l-1.2,4.2a.9.9,0,0,0,.4,1l4.4,2.8a.9.9,0,0,1,.4.9,32.5,32.5,0,0,0-.2,4.2.9.9,0,0,1-.5.8l-4.7,2.3a.9.9,0,0,0-.5,1l.8,4.3a.9.9,0,0,0,.8.7l5.2.6a.9.9,0,0,1,.7.6,33,33,0,0,0,1.6,3.9.9.9,0,0,1-.1.9L45,89.4a.9.9,0,0,0,0,1.1L47.6,94a.9.9,0,0,0,1,.3l5-1.8a.9.9,0,0,1,.9.2,32.2,32.2,0,0,0,3.2,2.8.9.9,0,0,1,.3.9l-1.1,5.2a.9.9,0,0,0,.4,1l3.8,2.1a.9.9,0,0,0,1.1-.2l3.8-3.8a.9.9,0,0,1,.9-.2l4,1.1a.9.9,0,0,1,.7.7l1.2,5.2a.9.9,0,0,0,.8.7l4.3.2a.9.9,0,0,0,.9-.6l1.8-5.1a.9.9,0,0,1,.7-.6l4-.7a.9.9,0,0,1,.9.3l3.4,4.2a.9.9,0,0,0,1,.3l4-1.7a.9.9,0,0,0,.5-.9l-.6-5.4a.9.9,0,0,1,.4-.9A32.4,32.4,0,0,0,98.4,95a.9.9,0,0,1,.9-.1l4.9,2.3a.9.9,0,0,0,1-.2l2.9-3.3a.9.9,0,0,0,.1-1.1L105.3,88a.9.9,0,0,1,0-.9l1-1.7.9-1.8a.9.9,0,0,1,.8-.5h5.5a.9.9,0,0,0,.8-.6l1.2-4.2a.9.9,0,0,0-.4-1l-4.6-2.9a.9.9,0,0,1-.4-.9,32.2,32.2,0,0,0,.2-4A.9.9,0,0,1,110.8,68.5ZM92.7,77.1a16.1,16.1,0,1,1-6.5-21.9A16.1,16.1,0,0,1,92.7,77.1Z"/>
   </g>
 </g>
   <g id="gear-small">
     <path d="M47.9,38.1A18.8,18.8,0,0,1,43.3,46l3,4.8-3.7,2.8-3.8-4.1A18.8,18.8,0,0,1,30,51.8l-1.3,5.4-4.6-.6.2-5.5a18.8,18.8,0,0,1-7.8-4.6l-4.7,2.9L9,45.6l4.1-3.8a18.8,18.8,0,0,1-2.3-8.8L5.4,31.8,6,27.2l5.6.2a18.8,18.8,0,0,1,4.6-7.8l-3-4.8,3.7-2.8,3.8,4.2A18.8,18.8,0,0,1,29.4,14l1.3-5.5,4.6.6-.2,5.7a18.8,18.8,0,0,1,7.7,4.5l4.8-3L50.5,20l-4.2,3.9a18.8,18.8,0,0,1,2.3,8.7l5.5,1.3-.6,4.6ZM31.2,21.8a11.1,11.1,0,1,0,9.5,12.5A11.1,11.1,0,0,0,31.2,21.8Z" transform="translate(-0.3)" fill="#aadb1e" fill-rule="evenodd"/>
   </g>
   
     </svg>

＆＃13;

Answer 2

对于那些面临类似问题的人来说，似乎将样式声明移到css中并从内联<path>属性中解决了问题。请参阅this fiddle。

SVG Transform Origin CSS动画 - Firefox Bug

2 个答案: