SVG line markers may disappear when the SVG content is updated through script code in Internet Explorer 11

View products that this article applies to.

Symptoms

Assume that you have an SVG document that contains line elements with markers. Then, you open the SVG document in Internet Explorer 11. When the SVG content is updated through script code (for example, through the onmouseover and onmouseout events), the line markers may disappear.

↑ Back to the top

Resolution

Update information

To resolve this problem, install the most recent cumulative security update for Internet Explorer. To do this, go to Microsoft Update. Additionally, see the technical information about the most recent cumulative security update for Internet Explorer.

Note This update was first included in the November cumulative security update for Internet Explorer (MS14-065) .

↑ Back to the top

More Information

For example, this issue can occur in an SVG document that contains the following code:

<svg xmlns="http://www.w3.org/2000/svg" viewBox = "0 0 4000 2000" version = "1.1">
<defs>
          <marker id = "StartMarker" viewBox = "0 0 12 12" refX = "12" refY = "6" markerWidth = "3" markerHeight = "3"  stroke-width = "2"  orient = "auto">
            <circle cx = "6" cy = "6" r = "5"></circle>
          </marker>
 
          <marker id = "EndMarker" viewBox = "0 0 10 10" refX = "5" refY = "5" markerUnits = "strokeWidth" markerWidth = "3" markerHeight = "3"  stroke-width = "2" >
            <rect x = "0" y = "0" width = "10" height = "10"></rect>
          </marker>
             
          <marker id="Circle" viewBox="0 0 10 10" refX="4" refY="10" markerUnits="strokeWidth" markerWidth="6" markerHeight="6" orient="auto">
            <circle cx="5" cy="5" r="5" fill="black" ></circle>
          </marker>
 
          <marker id="Rect" viewBox="0 0 20 20" refX="0" refY="10" markerUnits="strokeWidth" markerWidth="10" markerHeight="10" orient="auto">
            <rect width="10" height="10" fill="grey" ></rect>
          </marker>
        </defs>
             
       <path id="path1" d = "M 200 250 L 700 100 " fill = "none" stroke = "black" stroke-width = "50" marker-start = "url(#StartMarker)" marker-mid = "url(#MidMarker)" marker-end = "url(#EndMarker)" onmouseover="this.style.stroke = 'blue';" onmouseout="path1.style.stroke = 'red';"></path>
    </svg>