firefox ≤110 不支持 marker-end，111+ 需启用 about:config 开关并确保 marker 在同文档 svg 内、markerunits 不为 strokewidth、orient 用 auto、refx/refy 单位匹配，否则静默失效。
Firefox里marker-end不显示，先确认是不是根本没解析
Firefox ≤110 版本压根不支持 marker-end，不是写法错，是浏览器直接跳过该属性。哪怕你写了 marker-end: url(#arrow)，它也静默忽略，不报错、不警告、DevTools 的 Computed 面板里甚至看不到这条声明——你看到的可能是继承值或空字符串。
验证方式只有一条：getComputedStyle(svgLineElement).markerEnd 返回 "none" 或空字符串，说明未激活；返回类似 "url(#arrow)" 才代表基础支持已就位。
- 必须用 JS 检测，
@supports (marker-end: url(#x))在 Firefox 111–113 存在 bug，会误判为 true - Firefox 111+ 才默认启用 SVG marker 支持，但需同时开启两个 about:config 开关：
layout.css.svg.marker.enabled和svg.marker.enabled（后者在部分旧内核中仍需手动设为 true） - 改完开关后必须完全关闭所有 Firefox 窗口再重启，否则 CSS 引擎不会重载 SVG 解析模块
marker-end引用的 <marker></marker> 元素必须在当前文档上下文里
Firefox 对 url(#id) 的解析比 Chrome 更严格：它要求 <marker></marker> 必须定义在当前 HTML 文档的 <svg></svg> 内，且不能跨 Shadow DOM、iframe 或外部 SVG 文件引用。
常见翻车点：
- 把
<marker></marker>放在里的<svg></svg>中，但目标<line></line>在的另一个<svg></svg>里 → Firefox 不认 - 用
fetch动态加载外部 SVG 并注入defs，但没等 DOM 更新完成就渲染连线 →url(#arrow)查无此 ID - Angular/React 中用组件动态生成
<marker></marker>，但渲染顺序导致<marker></marker>出现在<line></line>之后 → Firefox 拒绝解析
稳妥做法：把 <marker></marker> 定义放在目标 <svg></svg> 的首个子元素位置（即 <defs></defs> 紧贴 <svg></svg> 开头），并确保它在连线元素前被插入 DOM。
Firefox 不支持 markerUnits="strokeWidth"，别碰这个值
Chrome 和 Safari 支持 markerUnits="strokeWidth"，能让箭头随 stroke-width 缩放；但 Firefox 只认 markerUnits="userSpaceOnUse" 和默认值 "viewBox"，遇到 "strokeWidth" 会直接丢弃整个 <marker></marker> 声明。
检查你的 <marker></marker> 定义：
<marker id="arrow" markerwidth="10" markerheight="7" refx="10" refy="3.5" orient="auto-start-reverse" markerunits="strokeWidth"><path d="M0 0 L0 7 L10 3.5 Z" fill="#333"></path></marker>
→ 把 markerUnits="strokeWidth" 删掉，或改成 markerUnits="userSpaceOnUse"。同时注意 refX/refY 的单位逻辑会随之变化：前者基于用户坐标系绝对值，后者基于 viewBox 比例。
-
orient="auto-start-reverse"在 Firefox 112+ 才稳定支持，旧版请降级为orient="auto" -
preserveAspectRatio在<marker></marker>内无效，Firefox 忽略它 - 箭头
<path></path>的fill必须显式设置，Firefox 不继承父元素颜色
兜底方案：用 ::before 模拟 marker-end 时避坑要点
当 Firefox 版本不可控（比如企业内网锁定旧版），或需要统一多端表现时，放弃 marker-end，改用 li::before 或 div::before 绝对定位模拟箭头更可靠。但容易出错的是定位偏移和层级。
- 必须给宿主元素加
position: relative，否则::before的left/top会相对于最近定位祖先，不是你预期的元素本身 -
::before的content只能是字符串、counter()或counters()，不能用url()或attr()—— Firefox 对伪元素内容限制比 Chrome 更严 - 若宿主是 Flex 容器，
::before默认是 inline，需加display: block才能设宽高；若要居中对齐，推荐用transform: translate(-50%, -50%)而非left: 50%; top: 50%，避免因字体度量干扰偏移 - 深色模式下，
::before的颜色不会自动适配，需配合@media (prefers-color-scheme: dark)单独设color或background
真正难调的不是画箭头，而是箭头尖端到连线终点的像素级距离——这个间隙由 UA 样式硬编码，marker-end 和 ::before 都得靠反复测量 left / margin-right 来对齐，没有通用公式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
