SVG Transform Origin CSS動畫 - Firefox Bug

試圖獲得跨瀏覽器的SVG/CSS動畫。我知道this firefox bug，但奇怪地使用transform-box: fill-box;解決了一個例子中的問題，但不是另一個。SVG Transform Origin CSS動畫 - Firefox Bug

看到小提琴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; 
}

轉化的SVG <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>

來源

2017-08-10 Nick B

我的問題是不是W3C規範@RobertLongson，而是即將實現的SVG對象的變換起源和已經在跨瀏覽器這樣出現的問題。 –

我已經解決了這個問題，但我感謝你的貢獻。 –

-2

對於那些面臨着類似的問題，它似乎將樣式聲明移動到css中並脫離聯機<path>屬性解決了問題。見this fiddle。

來源

2017-08-10 22:07:30

你的小提琴在Firefox上不起作用。 –

如果您希望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" 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>

來源

2017-08-11 05:01:39

SVG Transform Origin CSS動畫 - Firefox Bug

回答

相關問題