The position of a line does not change in IE11 aft

Question

Using d3's method .attr to update <path d="M100,100L200,200" style="marker-end: url(#end-arrow)"> has no effect in IE11? If I remove style="marker-end: url(#end-arrow)", it will become normal in IE11. How to get the results like Chrome display?

Bug: Show in IE11

HTML:

<svg width="100%" height="300px">
  <defs>
    <marker id="end-arrow" viewBox="0 -5 10 10" refX="50" markerWidth="5" markerHeight="5" orient="auto">
      <path d="M0,-5L10,0L0,5"></path>
    </marker>
  </defs>
  <path class="link" d="M100,100L200,200" style="marker-end: url(#end-arrow)"></path>
  <circle class="start" cx="100" cy="100" r="40"/>
  <circle class="end" cx="200" cy="200" r="40"/>
</svg>
<div>
  <input name="update1" type="button" value="update1">
  <input name="update2" type="button" value="update2">
</div>

CSS:

path.link {
  fill: none;
  stroke: #333;
  stroke-width: 2px;
  cursor: default;
}
circle {
   stroke: black;
   stroke-width: 1;
   fill: #f3f5f6;
}

JavaScript:

d3.select('input[name=update1]').on('click', function() {
  d3.select('path.link').attr('d', 'M100,100L300,100');
  d3.select('circle.end')
    .attr('cx', '300')
    .attr('cy', '100')
})
d3.select('input[name=update2]').on('click', function() {
  d3.select('path.link').attr('d', 'M100,100L200,200');
  d3.select('circle.end')
    .attr('cx', '200')
    .attr('cy', '200')
})

Can you help me change the JSFiddle example I wrote?