SVG圆形标记在IE11与其他浏览器尺寸不一致问题排查

嘿，这个问题我之前做SVG兼容的时候也踩过类似的坑，来给你拆解下背后的原因：

• markerUnits属性的解析逻辑差异：
  现代浏览器（Chrome、Firefox、Edge）对markerUnits默认值strokeWidth的处理是基于路径描边宽度来缩放标记，但IE11对这个属性的支持存在bug——它要么忽略strokeWidth的设置，要么强制按userSpaceOnUse规则计算标记尺寸，这直接导致圆形标记在IE11里的显示大小和现代浏览器不一致。哪怕你没显式声明这个属性，IE11的默认渲染逻辑也和现代浏览器完全不同。

• 填充色的继承与渲染优先级问题：
  IE11在SVG marker的样式继承上有缺陷，当你不给<marker>内部的图形显式设置fill时，它不会正确继承父路径的填充色，反而可能被stroke属性覆盖，或者直接使用默认的黑色/透明值，这就是你看到填充色未生效的核心原因。

• stroke属性的渲染边界计算不同：
  你虽然按建议添加了stroke和stroke-width，但IE11对marker元素的stroke边界计算逻辑和现代浏览器不一样——现代浏览器会把marker的stroke视为图形边框，不影响核心尺寸计算；但IE11会把stroke-width的尺寸算进marker的整体大小里，进一步加剧了标记尺寸的差异。

如果要验证修复方向，可以试试给<marker>显式设置markerUnits="userSpaceOnUse"，同时给内部圆形明确设置fill和stroke属性，不要依赖样式继承，这样能大幅缩小IE11和现代浏览器的渲染差异。

内容的提问来源于stack exchange，提问作者Petrolea