marker inherits fill-opacity on use clone

Issue #10317497 • Assigned to Bogdan 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.”

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

    Changed Status from “Confirmed” to “Won’t fix”

    Changed Status from “Won’t fix”

  • Reactivating auto-resolved valid bugs reported by web dev community. Those were not expected to be resolved. We apologize for any inconvenience!

  • Microsoft Edge Team

    Changed Assigned To to “Bogdan B.”

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

Sign in