在不同瀏覽器中奇怪的內聯SVG故障

Question

我通過Sketch導出了四個內聯SVG的代碼，具有相同的筆畫寬度和顏色，但是一個SVG在Codepen瀏覽器中的瀏覽器&之間行爲異常。

Codepen Example

- 所有SVGs有「2」的行程寬度，然而，微博SVG要求「4」筆劃寬度來獲得相同的效果（適用於瀏覽器，Firefox & Safari瀏覽器）

-All SVGs可通過行程= 「＃999999」 相同的顏色：

• 我的項目直接通過Chrome瀏覽器火狐&觀察：Twitter的SVG中風是正確的顏色

• Codepen實施例在Chrome &火狐：twitter的圖標是明顯更明亮，顯示中風＃c2c2c2

• 個人設計& Codepen實施例上的Safari：嘰嘰喳喳SVG行程被渲染爲＃c2c2c2上既Codepen &我的個人項目

的 '解決方案' ...

通過更改填充=「＃999999」至fill =「＃fff」在twitter svg的'rect'標記中，svg在Safari中正常顯示。 Chrome & Firefox在沒有這個「修復」的情況下都能夠呈現正確的顏色，不受影響。從來源看時

此修復程序適用於Safari在我codepen例如&。但是，Chrome & Firefox 不會正確呈現codepen示例，無論是否應用此修補程序，而均正確呈現源代碼，修復或無法修復Twitter的svg。

我的解決方案現在可行，但我不明白爲什麼它的工作原理。任何有識之士都非常感謝！

<rect x="29.984127" y="0.716535433" width="24.5015702" height="20.6298476" fill="#fff"></rect> 

Answer 1

如果你想給予相同的筆劃寬度當一組<svg>元素，以同樣的樣子，你需要確保他們的viewbox -es是相等的。在您的示例中，每個視圖框都會縮放以適應所提供的width和height。

例如，在Illustrator中（這是我使用）的「畫板」相匹配的viewbox。所以每當我開始爲Web項目創建一組圖標時，我所做的第一件事就是確保他們的所有畫板大小相同。實際上，我通常從包含每個圖標的相同畫板導出所有圖層到不同的圖層。

我敢肯定，你可以達到同樣的素描。如果沒有，找到任何其他工具，允許您修改您的<svg> s視框以便它們匹配。

---

作爲一個側面說明，你可能想看看繁多的圖標，字體在線編輯和創建者，（Glypther，Icomoon，Fontello，...），但它不能保證爲您解決問題。他們會自動調整大小和居中放置圖標，有些則允許您在保存字體之前調整/調整大小，但個人而言，我從未嘗試將具有不同viebox-es的<svg>添加到相同的設置中。
問題是否會持續取決於導入是如何完成的。如果他們在導入時將圖標大小統一爲圖標，則縮放圖標以適應圖形，這將解決您的問題。但這並不意味着上述任何工具都可以做到。他們應該，恕我直言。