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

Confirmed Issue #11166457 • Assigned to Kevin B.


Amelia B.
Mar 5, 2017
This issue is public.
Found in
  • Microsoft Edge
  • Internet Explorer
Found in build #
Reported by 3 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):

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


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”

    • If you look at this example:
      you can see that a general CSS rule for .edge path is applied to the `` element inside the marker.
      By accident, I realised that using an explicit classname instead of the element path selector fixes the issue.

      This was a pain to debug as well, because the dev tools did not show that these styles were applied!

      Any chance that this will be fixed sometime?

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

    Sign in