marker not removed from use clone when removed from original element

Confirmed Issue #10318315 • Assigned to Kevin B.

Details

Author
Ana T.
Created
Dec 26, 2016
Privacy
This issue is public.
Found in
  • Microsoft Edge
Found in build #
14.14393
Reports
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.
<svg>
    <path id='arc' d='M0 0 h100 A100 100 0 0 1 86.6 50'/>
</svg>
  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' fill='red'></path>
</marker>
  1. From the CSS, set this #arrow marker on the #arc element.
#arc { 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'/>
  1. Remove marker on hover:
#arc:hover { marker-end: none; }

Marker only gets removed from the original element on hover, but not from the clone as well.

Live test: https://codepen.io/thebabydino/pen/yVdeyv

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Brad E.”

    • The whole invalidation model of svg isn’t in a very good shape right now, let’s admit it. It is even stranger when you add the following javascript, click on the page, then only mouse over the arc, you will see that we do refresh the second copy (better late than never) but still manage to draw the removed marker, so there are two distinct bugs here.

      var a = document.getElementById(“arrow”);
      window.onclick = function() {
       
       if(a.getAttribute(“markerWidth”)==30) {
        a.setAttribute("markerWidth",60);
       } else {
        a.setAttribute("markerWidth",30);
       }
       
      }

    • Microsoft Edge Team

      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