SVG 变换原点 CSS 动画 – Firefox 错误

Posted 2023-03-06

【中文标题】SVG 变换原点 CSS 动画 – Firefox 错误

【英文标题】：SVG Transform Origin CSS Animation – Firefox Bug

【发布时间】：2018-01-19 01:08:33

【问题描述】：

试图让 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;

转换一个包含<path>的SVG <g>group：

<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- fill-rule="evenodd"/>
</g>

【问题讨论】：

我的问题不是关于 w3c 规范@RobertLongson，而是关于在 SVG 对象上实现转换原点以及跨浏览器这样做时出现的问题。

我已经解决了这个问题，但感谢您的贡献。

【参考方案1】：

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

目前的解决方法是改用绝对坐标。

即使您对它只在 Chrome 上工作感到满意，但当 Chrome 修复它们的行为时，您的 SVG 可能会在未来崩溃。

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

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg"   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>

【参考方案2】：

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