SVG - Circle marker not the same size in all browsers (IE11)

Question

I tried adding a small circle marker at the end of the <path> element but noticed its size is different in IE11, but Chrome, Firefox, Edge have the "correct" size. Example: Codepen (Updated in Edit below)

<svg viewbox="0 0 100 100">
    <path
      stroke="#ffff00"
      fill-opacity="0"
      marker-start="url(#marker)"
      stroke-width="4"
      d="M 50 98 A 48 48 0 0 0 50 2"
    />

   <marker id="marker" refX="5" refY="5" markerWidth="100" markerHeight="100">
     <circle class="marker" fill="#ff0000" cx="5" cy="5" r="1.5" />
   </marker>
</svg>

I have also noticed that the fill is not being applied - images show the comparison between Chrome (left) and IE11 (right):

Anyone knows the reason for this?

EDIT: I have updated the codepen with the stroke and stroke-width attribute as per @vals suggestion: Updated Codepen

stroke="#ff0000" stroke-width="0"

Answer 1

Well, turns out that all you need is to set stroke-width="0", that seems to be default in other browsers, to IE

.svg-container {
  width: 300px;
  height: 300px;
  margin: 0 auto;
}

svg {
  overflow: visible;
}

<div class="svg-container">
  <svg viewbox="0 0 100 100">
    <path
          stroke="#ffff00"
          fill-opacity="0"
          marker-start="url(#marker)"
          stroke-width="4"
          d="M 50 98 A 48 48 0 0 0 50 2"
      />

    <marker id="marker" refX="5" refY="5" markerWidth="100" markerHeight="100">
      <circle class="marker" fill-opacity="1" stroke-width="0" fill="#ff0000" cx="5" cy="5" r="1.5" />
    </marker>
  </svg>
</div>