Question

以下代码是从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>

Answer 1

这是Firefox中的错误，代码很好。
我打开了an issue here，请注意这是一个回归，因此希望它会很快得到解决。

问题的要点是Firefox最近修改了元素的行为，以便他们像现在的规范那样在的Shadow-DOM中设置其克隆内容。似乎他们在这样做时弄坏了东西。

暂时，如果您需要解决方法，那么...不要使用 ...

已修复为今天的每晚 68。

Answer 2

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>

SVG-animateMotion不适用于Firefox中的USE元素

2 个答案: