I exported the code for four inline SVGs via Sketch, with the same stroke-width and color, but one SVG behaves erratically across browsers & within browsers on 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
The 'Solution'...
通过在Twitter svg的 'rect' 标签中更改 fill="#999999" 到“ fill="#fff ”，svg通常在Safari中显示.Chrome和Firefox，它们都没有这个'fix'呈现正确的颜色，不受影响 .
此修复程序适用于我的codepen示例中的Safari以及从源查看时 . 但是，Chrome和Firefox don't 正确渲染了codepen示例，无论是否应用此修补程序，而 both 正确地从源，修复或无修复渲染twitter svg .
My solution works for now, but I don't understand why it works. 非常感谢任何见解！
<rect x="29.984127" y="0.716535433" width="24.5015702" height="20.6298476" fill="#fff"></rect>
1 回答
如果在给定相同的笔触宽度时希望一组
<svg>元素看起来相似，则需要确保它们的 viewbox -es相等 . 在您的示例中，每个视图框都会缩放，以适应提供的width和height.例如，在Illustrator（我使用的是）中，"Artboard"与
viewbox匹配 . 因此，每当我开始为Web项目创建一组图标时，我要做的第一件事就是确保所有画板的大小相同 . 实际上，我通常从包含不同图层中每个图标的同一画板中导出所有画面 .我相信你可以在Sketch中实现同样的目标 . 如果没有，找到任何其他工具，允许您修改
<svg>的视图框，使它们匹配 .作为旁注，您可能需要查看大量的图标字体在线编辑器和创建者（Glypther，Icomoon，Fontello，...），但不能保证解决您的问题 . 它们会自动调整大小并使图标居中，有些允许您在保存字体之前调整/摆弄它，但是，就个人而言，我从未尝试将带有不同viebox-es的
<svg>添加到同一组中 .问题是否会持续取决于导入的执行方式 . 如果他们在导入时统一图标的视图框大小，缩放图标以适应，它将解决您的问题 . 但这并不意味着上述任何工具都可以做到 . 他们应该，imho .