Google chrome 模糊SVG渲染

我很难找出svg->字体转换的问题

使用Inkscape，我在矩形路径创建模式下使用绘图工具创建了一个新的svg（尺寸-1000x1000），它有一个星形形状

我用来创建的路径是：

 bottom left -> top center -> bottom right -> left top -> right top -> left top

以下是创建的文件：。到目前为止，此文件没有问题

现在，我已经将这个svg编译成字体，您可以查看生成的预览

这个预览在Safari和Chrome（或Firefox或Opera）中看起来不同。但它们都有一个填充区域。您可以自己查看预览链接，或者以下是其外观的屏幕截图：

铬：

狩猎：

为什么这个填充区排在第一位？为什么它在浏览器中不同

---

一点背景：

实际问题要大得多。我有一组由Adobe Illustrator中的某个人创建的SVG，其中一些在chrome和其他浏览器中以类似的方式（不需要的填充）出现故障。Safari和webkit2png以某种方式正确呈现svg字体。所以我试着用上面提到的步骤重新创建这个过程

更多背景：

---

我还使用了很多人建议的icomoon应用程序，它只是出于某种原因提供了空白字形。

在几乎所有情况下，字体字形都是由填充形状组成的。他们不使用笔划（线）。因此，当您的SVG转换为字体时，字体SVG将应用填充，即使它们以前没有填充

浏览器之间的差异可能是因为每个浏览器可能加载不同的生成字体类型。例如woff与TTF等

解决方法是设计SVG，使其仅使用填充形状，而不依赖笔划（即线条颜色、宽度等）。如果遵循以下规则，则转换时标志符号应始终有效：

保持线条颜色为“无”或“透明”

切勿使用黑色以外的任何填充颜色（即不要使用“白色”打洞）

切勿让形状交叉在自身或其他形状上

因此，例如，对于星形，它应该设计为一个填充的星形对象，其中有一个星形孔。

是否有填充规则集（或者应该有一套）？