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:
- Create an SVG shape (e.g.,
path), and style it directly for at least one property (e.g.,
- 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.,
- Create a
useelement that duplicates the shape (either by referencing it directly or by referencing an ancestor group).
- Apply a different value of the style property to the
useelement 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
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:
- #10317497 marker inherits fill-opacity on use clone
- #10321915 marker inherits fill even when fill on it is explicitly specified using ID selector
But note that, in this case, the incorrect styles are on the base element, not on the marker.
More discussion in this Twitter thread
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 pathis 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?