1. 首页
  2. 问答
  3. SVG图标在调整大小时无法正确显示

SVG图标在调整大小时无法正确显示

2014-10-19 102 views
0

我有这个图标16x16。当实际尺寸设置为13.4x16（某些环境原因）时，图标看起来模糊。尽管我理解SVG，它应该调整到我施加的任何大小，但是如果我设置preserveAspectRatio属性。我在这里做错了什么，为什么它调整得不好。SVG图标在调整大小时无法正确显示

.menu { 
 
    width: 13.4px; 
 
    height: 16px; 
 
}
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>SVG icon resize</title> 
 
</head> 
 

 
<body> 
 
    <svg class="menu" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" preserveAspectRatio="x16Y16 meet"> 
 
    <polygon points="2,6 2,4 14,4 14,6 " /> 
 
    <polygon points="2,9 2,7 14,7 14,9 " /> 
 
    <polygon points="2,12 2,10 14,10 14,12 " /> 
 
    </svg> 
 
</body> 
 

 
</html>

要观看的图标，它应该是，设置宽度16像素。

jsBin这个片段 - enter link description here

来源

2014-10-19 Chen Eshchar

回答

1

首先，你preserveAspectRatio无效。有效值的列表可以找到here。

虽然这本身并不是你“模糊”的原因。原因是由于缩小的尺寸（13.4 vs 16）导致SVG按比例缩小（13.4/16）。模糊只是抗锯齿。渲染器试图通过使用灰色像素来近似像素的分数。

但正确使用preserveAspectRatio可以帮到你。您选择的值将取决于你想要的窄图像什么样的行为：

  • 如果选择preserveAspectRatio="none"的图标会被挤压和拉伸以适应狭窄的大小。这对于这个特定的图标来说看起来很好，但可能不是您想要的其他图标。例如，图标中的圆圈将变成椭​​圆形。

  • 如果您希望图标内容保持相同的大小，但它在狭窄的空间居中，请尝试"xMidYMid slice"。

这两个都适用于这个图标。

  • 对于其他图标，您可能希望保留图标的左侧并从右侧剪下。在这种情况下，您可能需要使用"xMinYMid slice"。

希望这会有所帮助。

来源

2014-10-19 15:40:40

+0

感谢您的详细解答。关于preserveAspectRatio值 - 这只是一个错误。我试图测试一些东西，可能忘记了该代码段用作演示，我的不好。我认为你的解决方案可能有助于我所需，但它可能并不总是一个很好的解决方案来剪辑图标的一部分。不管怎么说，多谢拉。 – 2014-10-19 21:07:50

相关问题

 相关问题