0

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

代码笔示例

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

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

  • 我的项目通过 Chrome 和 Firefox 直接查看：twitter svg stroke 是正确的颜色

  • 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 示例，而两者都从源代码正确渲染 twitter svg，修复或不修复。

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

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

1 回答 1

1

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

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

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

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

于 2017-08-17T00:50:41.050 回答