Le fichier SVG animé ne joue pas sur la charge de rafraîchissement de Firefox

Question

J'ai créé un fichier SVG "chargement" animé. Cela fonctionne bien, sauf que l'animation ne joue pas sur un rafraîchissement dur (seulement testé en FF), sauf lors de l'affichage du SVG lui-même dans le navigateur (pas dans un document).

Here's a fiddle

<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96"> 
 
\t <linearGradient id="a" x1=".5" x2=".5" y2="1"> 
 
\t \t <stop stop-color="#191919" offset="0"/> 
 
\t \t <stop stop-color="#999" offset="1"/> 
 
\t </linearGradient> 
 
\t <linearGradient id="b" x1="1" x2="0" y2="1"> 
 
\t \t <stop offset="0" stop-color="#191919" stop-opacity=".9"/> 
 
\t \t <stop offset="1" stop-color="#999" stop-opacity=".9"/> 
 
\t </linearGradient> 
 
\t <linearGradient id="c" x1="1" x2="0" y1=".5" y2=".5"> 
 
\t \t <stop offset="0" stop-color="#191919" stop-opacity=".8"/> 
 
\t \t <stop offset="1" stop-color="#999" stop-opacity=".8"/> 
 
\t </linearGradient> 
 
\t <linearGradient id="d" x1="1" x2="0" y1="1"> 
 
\t \t <stop offset="0" stop-color="#191919" stop-opacity=".6"/> 
 
\t \t <stop offset="1" stop-color="#999" stop-opacity=".6"/> 
 
\t </linearGradient> 
 
\t <linearGradient id="e" x1=".5" x2=".5" y1="1"> 
 
\t \t <stop offset="0" stop-color="#191919" stop-opacity=".5"/> 
 
\t \t <stop offset="1" stop-color="#999" stop-opacity=".5"/> 
 
\t </linearGradient> 
 
\t <linearGradient id="f" x2="1" y1="1"> 
 
\t \t <stop offset="0" stop-color="#191919" stop-opacity=".4"/> 
 
\t \t <stop offset="1" stop-color="#999" stop-opacity=".4"/> 
 
\t </linearGradient> 
 
\t <linearGradient id="g" x2="1" y1=".5" y2=".5"> 
 
\t \t <stop offset="0" stop-color="#191919" stop-opacity=".3"/> 
 
\t \t <stop offset="1" stop-color="#999" stop-opacity=".3"/> 
 
\t </linearGradient> 
 
\t <linearGradient id="h" x2="1" y2="1"> 
 
\t \t <stop offset="0" stop-color="#191919" stop-opacity=".1"/> 
 
\t \t <stop offset="1" stop-color="#999" stop-opacity=".1"/> 
 
\t </linearGradient> 
 
\t <g> 
 
\t \t <rect width="10" height="25" x="43" y="4" fill="url(#a)" stroke="#000" ry="5" rx="5"/> 
 
\t \t <rect width="25" height="10" x="61.4" y="29.6" fill="url(#b)" stroke="#000" ry="5" rx="5" transform="rotate(-45 61.44 34.56)"/> 
 
\t \t <rect width="25" height="10" x="67" y="43" fill="url(#c)" stroke="#000" ry="5" rx="5"/> 
 
\t \t <rect width="25" height="10" x="61.4" y="56.4" fill="url(#d)" stroke="#000" ry="5" rx="5" transform="rotate(45 61.44 61.44)"/> 
 
\t \t <rect width="10" height="25" x="43" y="67" fill="url(#e)" stroke="#000" ry="5" rx="5"/> 
 
\t \t <rect width="25" height="10" x="9.6" y="56.4" fill="url(#f)" stroke="#000" ry="5" rx="5" transform="rotate(-45 34.56 61.44)"/> 
 
\t \t <rect width="25" height="10" x="4" y="43" fill="url(#g)" stroke="#000" ry="5" rx="5"/> 
 
\t \t <rect width="25" height="10" x="9.6" y="29.6" fill="url(#h)" stroke="#000" ry="5" rx="5" transform="rotate(45 34.56 34.56)"/> 
 
\t \t <animateTransform fill="freeze" attributeName="transform" attributeType="XML" type="rotate" from="0 48 48" to="360 48 48" dur="3s" repeatCount="indefinite"/> 
 
\t </g> 
 
</svg>

Answer 1

Je suppose que ce pourrait être un bug Firefox (ou le comportement prévu?), Mais il semble que l'animation ne démarre pas sur un rafraîchissement dur lorsque le SVG est chargé exclusivement par CSS. Le chargement dans une balise IMG fonctionne bien (et permet également à l'arrière-plan CSS de s'animer correctement), donc, pour contourner le problème, je peux mettre un <img> caché quelque part sur la page.

Le problème pourrait être de mon côté pour commencer. @Dez signale qu'il charge correctement de son côté.

@RobertLongson dit que cela devrait être corrigé dans Firefox 51.