title: SVG line markers scale differently in IE
body: <p>I'm trying to move from a static image to a more dynamic and editable SVG-image for some functionality of a website I'm working on. So far so good, I got the original image resmbled very quickly, since it is mostly lines. 
   I found the marker functionality, which pretty much is what I need at some points. Added the code, adjusted settings, showed it to my colleagues and got the typical question "Does it work everywhere?" after showing the image on FF. Fired up Chrome, looked nicely, started IE and the rude awakening came. 
   All markers were oversized quarter-circles, covering half of the image. The circle was rendered way too big. So I started to fiddle with settings, so it looks nice in IE. Switched to FF and the markers where so small they were gone.</p>
  
  <p>I tried using markerUnits "UserSpaceOnUse", just tried "preserveAspectRatio="xMidYMid meet", all to no avail. A simple example of lines and markers with a fiddle to demonstrate the issue</p>
  
  <pre><code>&lt;html&gt;
   &lt;body&gt;
    &lt;svg version="1.1" id="SVGStuff" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="150px" preserveAspectRatio="xMidYMid meet"&gt;
       &lt;defs&gt;
          &lt;marker id="endPointsFF" markerWidth="10" markerHeight="10" refX="1" refY="1"&gt;
             &lt;circle cx="1" cy="1" r="0.8" style="fill: #4141ff;" /&gt;
          &lt;/marker&gt;
  
          &lt;marker id="endPointsIE" markerWidth="12" markerHeight="12" refX="6" refY="6" markerUnits="userSpaceOnUse"&gt;
             &lt;circle cx="6" cy="6" r="2" style="fill: #4141ff;" /&gt;
          &lt;/marker&gt;   
       &lt;/defs&gt;
  
       &lt;line class="line" x1="50" y1="50" x2="150" y2="50" stroke="#4141ff" style="stroke-width:6; marker-start: url(#endPointsFF); marker-end: url(#endPointsFF)" /&gt;
       &lt;line class="line" x1="50" y1="100" x2="150" y2="100" stroke="#4141ff" style="stroke-width:6; marker-start: url(#endPointsIE); marker-end: url(#endPointsIE)" /&gt;
    &lt;/svg&gt;
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/p6jg0uwj/" rel="nofollow">http://jsfiddle.net/p6jg0uwj/</a></p>
  
  <p>The upper line displays the markers nicely in FF, but none for the lower line, whereas in IE the upper line displays the oversized markers and nice ones for the lower line.</p>
  
  <p>Found plenty of posts about bugs concerning animation and markers in IE, but couldn't find anything about scaling of markers in IE and other browsers. Is there any setting I miss, or do I have to switch to using and placing circles?</p>
  
  <p>Thanks in advance.</p>