Inkscape SVG 在 Firefox 中渲染不正确

Question

SVG 中的标记不会在 GitHub 网站上呈现。
这只发生在网站上，Android应用程序没有同样的问题。

Markdown file with the problem

SVG 是使用 Inkscape 创建的。

当我注意到这个问题时，我将文件更改为优化的 SVG（文件 -> 另存为 -> 优化的 SVG），但没有观察到任何变化。

编辑：情况比我最初想象的要棘手。
Firefox 根本不显示标记，而 Chrome 和 Edge 以黑色显示它们。上的图片这一页在不同的浏览器上显示不同。
我手动编辑了 XML 来为标记着色，最后得到了这个文件。 。
但是 Inkscape 没有在标记上显示红色轮廓。

编辑：这是不是我最初怀疑的一个 GitHub 问题，但是一个 Inkscape(+Firefox) 问题。仍然不确定Firefox是否对此负责。

Answer 1

更新：

因为浏览器仍然不支持所有 SVG2 功能，Inkscape 有一个更好的解决方法来解决这个问题：

• 选择编辑>喜好.

• 从左侧的树中，选择：输入输出>SVG 导出

• 在下面 ”SVG 2 到 SVG 1.1" 选中两个复选框以使用正确的方向和颜色（如下面的屏幕截图所示）。

• 现在保存 SVG 文件，如下所示：

  • 文件>另存为.
  • 选中该框：“在首选项对话框中按设置导出为 SVG 1.1"

• 现在标记应该在浏览器中正确呈现。

Windows 用户注意事项：

对于 Windows 用户，您需要一个额外的步骤才能启用“在“首选项”对话框中的每个设置导出为 SVG 1.1" 选项。要启用它：

• 选择：编辑>喜好.
• 从树视图中选择：界面>视窗.
• 在“桌面集成”下启用“GTK 打开/保存对话框”选项，如下图所示：

---

旧答案（但仍然相关）

这是一个已知问题（请参阅here）。一种解决方法是使用以下扩展为标记着色：

扩展>修改路径>颜色标记…

Answer 2

MDN says,（高亮我的）

<marker-ref>

该值是对<marker> 元素的引用，该元素将在最终顶点处绘制。如果引用无效，则不会绘制任何标记。

在此文件中，注意<marker>s 中<path> 上的属性fill="context-stroke" 和stroke="context-stroke"。

删除它们可以解决问题。仍然没有从 Inkscape 找到直接的方法来做到这一点。