模糊SVG渲染

Question

我無法找出我一直在使用svg->字體轉換的問題。

使用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被轉換爲字體時，字體SVGs會得到一個填充，即使它們之前沒有。

瀏覽器之間的差異可能是由於每個瀏覽器可能加載了不同的生成字體類型。例如。 woff和TTF等。

修復是設計你的SVG，使他們只使用填充的形狀和不要依靠筆畫（即線條的顏色，寬度等）。如果你遵循下列規則，你的字形是否應該轉換時，始終工作：

1. 保持你的線顏色爲「無」或「透明」，
2. 切勿使用任何填充顏色除了黑色（即沒有。用「白色」打孔）
3. 絕對不要讓形狀橫跨自己或其他形狀。

因此，例如，在你的恆星的情況下，它應該被設計成一個帶星形孔的充滿星形的物體。