marker inherits fill even when fill on it is explicitly specified using ID selector

Confirmed Issue #10321915 • Assigned to Kevin B.


Ana T.
Dec 27, 2016
This issue is public.
Found in
  • Microsoft Edge
Found in build #
Reported by 2 people

Sign in to watch or report this issue.

Steps to reproduce

  1. Create a <path> element inside a group <g> element:
<svg viewBox='-10 -5 20 10'>
        <path d='M-5 0h2A2 2 0 0 1 -3.3 1'/>
  1. Create a simple <marker>:
<marker id='a' viewBox='0 -5 10 10' 
                markerWidth='.5' markerHeight='.5'>
    <path d='M0-5L 10 0L0 5z'/>
  1. In the CSS, set the fill of the initial path element to orange, that of the marker to grey and set the marker on the initial path inside the group g:
#a path { fill: grey }

g path {
    fill: orange;
    marker-end: url(#a)

Expected result: the fill of the initial path in the group g is orange and that of the marker is grey. This is what happens in Chrome and Firefox.

Actual result in Edge: the marker inherits the orange fill of the initial path, even though I’ve explicitly set a fill on it using an ID selector.

Live test:


0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Brad E.”

      Changed Assigned To from “Brad E.” to “Kevin B.”

      Changed Status to “Confirmed”

    • The general case seems to be that any selectors fail if they depend on the parent-child relationship between the marker element (or its ancestors) and the marker contents.

      IE treated markers as shadow-DOM children of the shape they marked (following some conflicting examples in the SVG 1 spec). Edge now correctly sets marker content to inherit styles from the marker element instead of from the shape being marked, but I suspect the implementation still relies on clones which get their styles computed individually, instead of using the cascaded styles from the original markup.

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

    Sign in