marker inherits fill-opacity on use clone

Confirmed Issue #10317497 • Assigned to Kevin B.


Ana T.
Dec 26, 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. Inside an SVG, create a <path> element and give it an id of arc
    <path id='arc' d='M0 0 h100 A100 100 0 0 1 86.6 50'/>
  1. Create a marker and give it an id of arrow
<marker id='arrow' viewBox='-50 -70 250 140' 
        markerWidth='60' markerHeight='40'>
    <path d='M0-50L150,0L0,50z'></path>
  1. From the CSS, set this #arrow marker on the #arc element. Also set the fill-opacity of the #arc to .3:
#arc {
    fill-opacity: .3;
    marker-end: url(#arrow);
  1. Clone the #arc with an <use> element and displace it to the right by 150.
<use xlink:href='#arc' x='150'/>

Expected result (and the result in Chrome and Firefox): the <use> element looks identical to the one it clones.

Actual result: The marker on the use inherits the .3 value for the fill-opacity, even though the one on the original #arc element doesn’t.

Explicitly setting fill-opacity: 1 on the marker in the CSS fixes this, but it shouldn’t be necessary.

Live test:


1 attachment

Comments and activity

  • Microsoft Edge Team

    Changed Assigned To to “Brad E.”

    Changed Status to “Confirmed”

    Changed Assigned To to “Bogdan B.”

    Changed Assigned To from “Bogdan B.” to “Kevin B.”

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

Sign in