CODEWITHSUNDEEP
animationsvg
Sylvia Else
Sylvia Else

Reputation: 331

SVG - animateMotion does not work with USE element in Firefox

The following code is extracted from some produced by Tesla Powerwall gateway. The expected behaviour is that a green circle will traverse a path, and this is what Chrome shows. Under Firefox (66.0.5 in my case) it just sits at the left of the screen doing nothing.

Should it work under Firefox, and this is a bug in same, of is there something missing/wrong that I can tell Tesla about in the hope that they might get round to fixing it, even though they say they don't support Firefox?

Thanks, Sylvia.

<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>

Upvotes: 0

Views: 263

Answers (2)

Kaiido
Kaiido

Reputation: 136638

This is a bug from Firefox, the code is fine.
I opened an issue here, note that it is a regression, so hopefully, it will get fixed quickly.

The gist of the issue is that Firefox quite recently modified <use> element's behavior so that they set their cloned content in the Shadow-DOM of the <use>, like the specs now ask to. Seems that they broke something while doing so.

For the time being, if you ever need a workaround, well... don't use an <use>...

Fixed in today's nightly 68.

Upvotes: 1

Michael Mullany
Michael Mullany

Reputation: 31715

Firefox supports (at least in this example) animation via animate elements in use elements but not the animateMotion element. You'll want to tweak the values array to get close to the behavior of the arc in the path, but it's possible.

So something like this works in 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>

Upvotes: 0

Related Questions