在Firefox中硬刷新加载时不能播放动画SVG

Question

我已经创建了一个动画的"加载" SVG。它工作得很好，除了动画在硬刷新时不能播放(仅在FF中测试)，除了在浏览器中查看SVG本身(而不是在文档中)。

Here's a fiddle

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

Answer 1

我想这可能是Firefox的一个bug(或者故意的行为?)，但是当SVG完全通过CSS加载时，动画似乎没有在硬刷新时开始。

将其加载到IMG标签中可以很好地工作(并且还可以使CSS背景正确地动画)，因此作为一种解决方案，我可以在页面的某个地方放置隐藏的<img>。

问题可能一开始就在我这边。@Dez报告在他那端加载正确。

@RobertLongson说这应该在Firefox 51中修复。