1614584 - style transitions are not rendered in SVG on <use> childs, for style changes on the original xlink:href "target" element

Status: NEW

(Core :: SVG, defect, P3)

Description

[Martin Passard]

Attachment: exemplegraph.html

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:72.0) Gecko/20100101 Firefox/72.0

Steps to reproduce:

code exemple here: https://jsfiddle.net/46pen5jb/4/ (click on the circle, a transition on it's background should be visible).

When using a defs and a <use> elements to print something on a svg, and trying to have a transition, it's displayed in developer tools like it was but it isn't.

In html exemple joined it should be visible on hovering the legend.

Actual results:

The transition is not properly executed and the element immediately switch from a style to the other. The browser shows it in developer tools properly.

Expected results:

The transition should normally be done, like on not in <use> nodes.

Comment 1

[Robert Longson [:longsonr]]

Can you create a minimal example please? I.e. one use element, one transition etc.

Comment 2

[Martin Passard]

Here is a minimal example: https://jsfiddle.net/ko8uwpmL/4/ Don't hesitate to ask for a .html exemple.

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: reduced testcase

Here's a version of that jsfiddle, as a local attachment.

Comment 4

[Daniel Holbert [:dholbert]]

It looks like we've got the same behavior as far back as 2011-01-01 (version 4.0b9pre) (though I have to add -moz-transition to get the testcase to work that far back).

So, not a regression; this has behaved this way for quite a while. And it does seem like a bug.

Note that, in my testcase, we do show a transition in the <use> clone if you click that element (because in my version, we've got a click handler for that element as well which directly sets its own fill). So we do support transitions on these clones -- they just don't seem to work properly in this case where there's a style change on the "original" element.

Comment 5

[Daniel Holbert [:dholbert]]

For clarity in case behavior unexpectedly changes down the line:
STR:
(1) Load https://bugzilla.mozilla.org/attachment.cgi?id=9126151
(2) Click the first circle

EXPECTED RESULTS:
Both circles transition their fill-color

ACTUAL RESULTS:
Only the first circle transitions its fill-color. The second one changes its fill color immediately, without playing the transition.