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 1 person

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”

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

    Sign in