模糊SVG渲染

Question

我无法找出我使用svg-＆gt;字体转换时遇到的问题。

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

我以前创建的路径是：

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

这是创建的文件：star.svg。到目前为止，此文件没有任何问题。

现在，我已使用fontcustom将此svg编译为字体，您可以查看生成的预览here。

此预览在Safari与Chrome（或Firefox或Opera）中的外观不同。但是所有这些区域都有一个填满的区域。您可以自己查看预览链接，或者查看其外观的屏幕截图：

铬：

Safari浏览器：

为什么这个填充区域首先出现？为什么它在浏览器中有所不同？

---

一点背景：

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

更多背景信息：

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

Answer 1

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

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

修复方法是设计你的SVG，使它们只使用填充的形状，不依赖笔画（即线条颜色，宽度等）。如果您遵循以下规则，您的字形应在转换时始终有效：

1. 将您的线条颜色保持为“无”或“透明”，
2. 切勿使用除黑色外的任何填充色（即不要使用“白色”来打孔）
3. 永远不要让形状穿过自己或其他形状。

因此，例如，对于你的恒星，它应该被设计成一个填充星形物体，其中有一个星形孔。