Question

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

＆＃13;

.menu {
  width: 13.4px;
  height: 16px;
}

＆＃13;

<!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>

＆＃13;

要观看图标，请将宽度设置为16px。

jsBin for this snippet - enter link description here

Answer 1

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

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

但正确使用preserveAspectRatio可以帮助您。您选择的值取决于您对较窄图像的行为：

如果选择preserveAspectRatio="none"，图标将被挤压并拉伸以适合窄尺寸。这对于这个特定的图标看起来很好，但可能不是你想要的其他图标。例如，图标中的圆圈将变为椭圆形。
如果您希望图标内容保持相同的尺寸，但将其置于狭窄空间的中心位置，请尝试"xMidYMid slice"。

这两个都适用于此图标。

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

希望这有帮助。

调整大小时SVG图标无法正确呈现

1 个答案: