以下代码是从Tesla Powerwall网关产生的一些代码中提取的。预期的行为是绿色圆圈将遍历路径,这就是Chrome显示的内容。在Firefox(以我的情况为66.0.5)下,它仅位于屏幕左侧,什么也不做。
它是否应该在Firefox下工作,这也是一个错误,我可以告诉特斯拉一些遗漏/错误的地方,以希望他们可以改正它,即使他们说不这样做。支持Firefox?
谢谢西尔维亚。
<html>
<body bgcolor="#000000">
<svg width="250" height="100" viewBox="0 0 250 100">
<defs>
<g id="curvedArrow" stroke-width="1">
<path id="curvedPath" d="M 125 75 l 0 -45 a 5,5 0 0 1 5,-5 L 250 25" fill="none"></path>
<circle cx="0" cy="0" r="7" fill-opacity="0.5" stroke-opacity="0">
<animateMotion dur="1000ms" repeatCount="indefinite">
<mpath xlink:href="#curvedPath"></mpath>
</animateMotion>
</circle>
<circle cx="0" cy="0" r="1.5" stroke-opacity="0">
<animateMotion dur="1000ms" repeatCount="indefinite">
<mpath xlink:href="#curvedPath"></mpath>
</animateMotion>
</circle>
</g>
</defs>
<use id="battery-to-home" xlink:href="#curvedArrow" fill="#00D000" x="3" y="28"></use>
</svg>
</body>
</html>
答案 0 :(得分:1)
这是Firefox中的错误,代码很好。
我打开了an issue here,请注意这是一个回归,因此希望它会很快得到解决。
问题的要点是Firefox最近修改了
暂时,如果您需要解决方法,那么...不要使用
已修复为今天的每晚 68。
答案 1 :(得分:0)
Firefox通过use元素中的animate
元素(至少animateMotion
元素)支持(至少在此示例中)动画。您可能需要调整values数组,使其接近路径中弧的行为,但是有可能。
所以类似的东西在FF中有效。
<svg width="250" height="100" viewBox="0 0 250 100">
<defs>
<g id="curvedArrow" stroke-width="1">
<path id="curvedPath" d="M 125 75 l 0 -45 a 5,5 0 0 1 5,-5 L 250 25" fill="none"></path>
<circle cx="0" cy="0" r="7" fill-opacity="0.5" stroke-opacity="0">
<animate attributeName="cx" values="125; 125; 250" dur="3s" fill="freeze"/>
<animate attributeName="cy" values="75; 30; 30" dur="3s" fill="freeze"/>
</circle>
<circle cx="0" cy="0" r="1.5" stroke-opacity="0">
<animate attributeName="cx" values="125; 125; 250" dur="3s"/>
<animate attributeName="cy" values="75; 30; 30" dur="3s"/>
</circle>
</g>
</defs>
<use id="battery-to-home" xlink:href="#curvedArrow" fill="#00D000" x="3" y="28"></use>
</svg>