SVG

Question

我尝试在 <path> 元素的末尾添加一个小圆圈标记，但注意到它在 IE11 中的大小不同，但 Chrome、Firefox、Edge 的大小为 "correct" .示例：Codepen（在下面的编辑中更新）

<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>

我还注意到未应用填充 - 图片显示了 Chrome（左）和 IE11（右）之间的比较：

有人知道这是什么原因吗？

编辑：我根据@vals 的建议用 stroke 和 stroke-width 属性更新了代码笔：Updated Codepen

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

Answer 1

嗯，原来你只需要设置 stroke-width="0"，这在其他浏览器中似乎是默认的，到 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>

SVG - 圆形标记在所有浏览器中的大小不同 (IE11)

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

css

cross-browser

internet-explorer-11