Style matching incorrect when SVG element with marker is cloned by <use>

Confirmed Issue #11166457 • Assigned to Kevin B.

Details

Author
Amelia B.
Created
Mar 5, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
  • Internet Explorer
Found in build #
15.15049
Reports
Reported by 2 people

Sign in to watch or report this issue.

Steps to reproduce

If an SVG shape element has a marker applied to it, and that element is cloned with a use, and the use element has a style applied with a CSS selector, then that style gets propagated to the cloned shape, even if the original shape has a different style value applied.

To recap, the repro steps are:

  1. Create an SVG shape (e.g., circle or path), and style it directly for at least one property (e.g., fill).
  2. Also give the shape a marker property. The marker doesn’t have to even exist, it just has to be set as a style (e.g., marker: url(#x)).
  3. Create a use element that duplicates the shape (either by referencing it directly or by referencing an ancestor group).
  4. Apply a different value of the style property to the use element using a CSS rule (not an inline style or a presentation attribute).

What should happen: the style applied directly to the shape overrides an inherited style from the use.

What does happen: in this particular combination of properties, the style on the shape is ignored and the style on the use is applied.

Test case, showing various cases that don’t have the bug along (green semi-circles) with the particular combination of properties that does create it (red): https://codepen.io/AmeliaBR/pen/LWZoPe?editors=1000

This is probably related to these other bugs about markers and styling:

But note that, in this case, the incorrect styles are on the base element, not on the marker.

More discussion in this Twitter thread

Attachments

0 attachments

    Comments and activity

    • Changed Steps to Reproduce

    • Microsoft Edge Team

      Changed Assigned To to “Steven K.”

      Changed Assigned To to “Rick J.”

      Changed Assigned To to “Bogdan B.”

      Changed Assigned To from “Bogdan B.” to “Kevin B.”

      Changed Status to “Confirmed”

    You need to sign in to your Microsoft account to add a comment.

    Sign in