时间戳

首页 > 解决方案 > SVG - animateMotion 不适用于 Firefox 中的 USE 元素

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

问题描述

以下代码摘自 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>

标签： animationsvg

解决方案

这是Firefox的一个错误，代码很好。
我在这里打开了一个问题，请注意这是一个回归，所以希望它会很快得到修复。

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

目前，如果您需要解决方法，那么...不要使用 <use>...

固定在今天的每晚68。

推荐阅读