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>