如何定义SVG viewBox以消除可见元素周围的填充物

Question

This SVG icon中的[Material Design]稍微偏离中心。出现原因是由于其viewBox定义了24x24容器，而唯一可见的路径定义为79.17x83.33容器（如果您在Google Chrome浏览器中检查了SVG，则可以看到它）。

假设这个假设是正确的，您如何纠正viewBox以便没有多余的填充，这可能会导致飞机居中？还有其他建议建议重新定位/转换SVG以使其居中，但这不是目标。

目标是修改viewBox，删除可见元素周围的多余填充，并使SVG自然地居中而无需平移。

最终目标是确保SVG居中，而无需平移/重新定位元素。

#container {
  width: 100px;
  height: 100px;
  background: red;
}

#icon {
  width: 100px;
  height: 100px;
}

<div id="container">

<svg id="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10.18 9"/><path d="M21 16v-2l-8-5V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z"/></svg>

</div>

Answer 1

您可以使用transform transform="translate(0.6, 0)"检查代码段执行此操作。

#container {
  width: 100px;
  height: 100px;
  background: red;
}

#icon {
  width: 100px;
  height: 100px;
}

<div id="container">

  <svg id="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10.18 9"/><path d="M21 16v-2l-8-5V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z" transform="translate(0.6, 0)"/></svg>

</div>