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

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>

hyowinner 回答:如何定义SVG viewBox以消除可见元素周围的填充

您可以使用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>

本文链接:https://www.f2er.com/3052851.html

大家都在问