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

Duplicate Issue #10321915 • See Issue #11166457

Details

Author
Ana T.
Created
Dec 27, 2016
Privacy
This issue is public.
Found in
  • Microsoft Edge
Duplicates
See progress on Bug #11166457
Found in build #
14.14393
Reports
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'>
    <g>
        <path d='M-5 0h2A2 2 0 0 1 -3.3 1'/>
    </g>
</svg>
  1. Create a simple <marker>:
<marker id='a' viewBox='0 -5 10 10' 
                markerWidth='.5' markerHeight='.5'>
    <path d='M0-5L 10 0L0 5z'/>
</marker>
  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: https://codepen.io/thebabydino/pen/VmPMrV/?editors=1100

Attachments

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.

    • Microsoft Edge Team

      Changed Status from “Confirmed” to “Duplicate”

    • This bug has marked as duplicate. Please follow the parent issue to get new updates.

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

    Sign in