Firefox下Inkscape导出SVG的Arrowhead不显示问题咨询

这个问题是Inkscape默认导出逻辑和旧版Firefox兼容性叠加导致的，不属于单方绝对bug：

• Inkscape 1.1版本的内置箭头预设默认使用SVG 2规范新增的context-stroke属性值，作用是让箭头颜色自动跟随所属路径的描边颜色，无需手动单独配置
• Firefox 91.0.2版本对marker（箭头标记）内的context-stroke属性支持存在缺陷，该兼容性问题在Firefox 92及更高版本才被完整修复，所以才会出现其他浏览器正常显示、旧版Firefox看不到箭头的情况。

你可以任选以下任意一种方式解决：

直接修改现有SVG代码 #

把<defs>中对应marker的style属性里的context-stroke替换为实际的色值即可，你当前代码路径用的是黑色描边，修改后对应marker的path样式如下：

<path
  transform="scale(1.1) rotate(180) translate(1,0)"
  d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
  style="fill-rule:evenodd;fill:#000000;stroke-width:0.625;stroke-linejoin:round;"
  id="path899" />

Inkscape导出前提前配置 #

如果要从源头上避免该问题，可以在Inkscape导出SVG前执行以下操作：

• 选中带箭头的路径，把箭头的填充属性从「继承描边」手动修改为固定颜色
• 导出时勾选「兼容旧版SVG」的导出选项，Inkscape会自动将context-stroke替换为实际使用的色值，无需手动修改代码。

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