我通过Sketch导出了四个内联SVG的代码，具有相同的笔画宽度和颜色，但是一个SVG在浏览器和行程中表现不稳定。在Codepen上的浏览器中。
- 所有SVG的笔触宽度均为“2”，但是，twitter svg需要'4'的笔触宽度才能获得相同的效果（适用于Chrome，Firefox＆amp; Safari浏览器）
- 所有SVG都是相同的颜色，通过stroke =“＃999999”：
关于Chrome＆amp ;;的Codepen示例Firefox：twitter图标明显更亮，笔划显示为＃c2c2c2
个人项目＆amp; Safari上的Codepen示例：twitter svg stroke在Codepen和＆amp ;;上呈现为＃c2c2c2。我的个人项目
'解决方案'......
通过在twitter svg的'rect'标记中将 fill =“＃999999”更改为 fill =“＃fff ”，svg在Safari中正常显示。 Chrome＆amp; Firefox没有这个'修复'，它们都呈现正确的颜色，不受影响。
此修复程序适用于我的codepen示例＆amp;从源头上看。但是，Chrome＆amp; Firefox 不正确呈现codepen示例，无论是否应用此修复，而两者正确地从源代码修复twitter svg，修复或无法修复。
我的解决方案现在有效，但我不明白为什么可行。非常感谢任何见解！
<rect x="29.984127" y="0.716535433" width="24.5015702" height="20.6298476" fill="#fff"></rect>
答案 0 :(得分：1)
如果您希望在给定相同笔触宽度时，一组<svg>元素看起来相似，则需要确保它们的 viewbox -es相等。在您的示例中，每个视图框都会进行缩放，以适应提供的width和height。
例如，在Illustrator（我使用的是）中，＆＃34;画板＆＃34;匹配viewbox。因此，每当我开始为Web项目创建一组图标时，我要做的第一件事就是确保所有画板的大小相同。实际上，我通常会从包含不同图层中每个图标的同一画板中导出所有内容。
我相信你可以在Sketch中实现同样的目标。如果没有，请找到允许您修改<svg>的视图框以使其匹配的任何其他工具。
作为旁注，你可能想看看大量的图标字体在线编辑和创作者（Glypther，Icomoon，Fontello，......），但不能保证解决你的问题。问题。它们会自动调整大小并使图标居中，有些允许您在保存字体之前调整/摆弄它，但就个人而言，我从未尝试将<svg>与不同的viebox-es添加到同一组中。 />
问题是否会持续取决于导入的执行方式。如果他们在导入时统一图标的视图框大小，缩放图标以适应，它将解决您的问题。但这并不代表上述任何工具都能做到这一点。他们应该，imho。