不同浏览器中奇怪的内联 SVG 故障答案

【问题标题】：Bizarre inline SVG glitch in different browsers不同浏览器中奇怪的内联 SVG 故障
【发布时间】：2018-01-25 06:22:01
【问题描述】：

我通过 Sketch 导出了四个内联 SVG 的代码，具有相同的笔画宽度和颜色，但一个 SVG 在浏览器和 Codepen 上的浏览器中表现不规律。

-所有 SVG 的笔画宽度为 '2'，然而，twitter svg 需要 '4' 的笔画宽度才能获得相同的效果（适用于 Chrome、Firefox 和 Safari )

-所有 SVG 通过 stroke="#999999" 的颜色相同：

我通过 Chrome 和 Firefox 直接查看的项目：twitter svg 笔划是正确的颜色
Chrome 和 Firefox 上的 Codepen 示例：twitter 图标明显变亮，笔划显示为 #c2c2c2
Safari 上的个人项目和 Codepen 示例：twitter svg stroke 在 Codepen 和我的个人项目上都呈现为 #c2c2c2

“解决方案”...

通过将 twitter svg 的 'rect' 标签中的 fill="#999999" 更改为 fill="#fff"，svg在 Safari 中正常显示。 Chrome 和 Firefox，在没有这个“修复”的情况下都呈现了正确的颜色，不受影响。

此修复适用于我的 codepen 示例中的 Safari 以及从源代码查看时。但是，Chrome 和 Firefox不正确呈现 codepen 示例，无论是否应用了此修复，而 both 从源代码正确渲染 twitter svg，修复或不修复。

我的解决方案目前有效，但我不明白为什么有效。非常感谢任何见解！

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

【问题讨论】：

标签： html css svg sketch-3

【解决方案1】：

如果您希望一组<svg> 元素在给定相同笔画宽度时看起来相似，您需要确保它们的viewbox-es 相同。在您的示例中，每个视图框都被缩放以适应提供的width 和height。

例如，在 Illustrator（这是我使用的）中，“画板”与 viewbox 匹配。因此，每当我开始为 Web 项目创建一组图标时，我要做的第一件事就是确保它们的所有画板大小相同。事实上，我通常从同一个画板中导出所有内容，其中每个图标包含在不同的图层中。

我相信你可以在 Sketch 中实现同样的效果。如果没有，请找到任何其他工具，让您可以修改 <svg>s 的视图框以使其匹配。

作为旁注，您可能想看看大量的图标字体在线编辑器和创建者（Glypther、Icomoon、Fontello，...），但不能保证能解决您的问题。它们确实会自动调整图标的大小和居中，有些允许您在保存字体之前对其进行调整/摆弄，但就个人而言，我从未尝试将具有不同 viebox-es 的 <svg>s 添加到同一组中。
问题是否会持续存在取决于导入的方式。如果他们在导入时统一跨图标的视图框大小，缩放图标以适应，它将解决您的问题。但这并不意味着上述任何工具都可以做到。他们应该，恕我直言。

【讨论】：