html - 为什么以使用百分比衡量时 svg 图标上方和下方有一个空格？但不是以像素为单位测量时使用

Question

我正在使用带有 svg Sprite 的图标，我希望图标的宽度为 porcentage，但是当我使用 % 宽度时，图标在顶部和底部获得一个空间。

这是问题的演示:http://codepen.io/luisco/pen/GjOaEP?editors=1100

 /* I want to achieve the first svg (without space on top and bottom) but in porcentage */

.instagram1 {
    width: 100px;
    height: 100px;
    border: 1px solid black;
}

.instagram2 {
    width: 10%;
    height: 10%; /* You can omit this rule */
    border: 1px solid black; /* only for show you the space */
}

你能帮帮我吗？谢谢

Answer 1

根据您的“路径”声明，“移动到”命令“M”是绝对坐标表示。

要使“%”在 CSS 中工作，请尝试使用相对坐标的路径。