html - SVG 上的额外垂直空间

Question

我有一个 16x16px 的 SVG，带有 10px 的填充和 1px 的边框，出于某种原因，高度是 40px 而不是 38px，就像宽度一样(在我的本地站点上，它实际上是 36.95x44px)。我可以做些什么来消除这个额外的空间并获得完美的正方形？

.layout-toggle {
  display: inline-block;
  padding: 10px;
  border: 1px solid grey;
}
.layout-toggle.layout-active {
  background-color: black;
}
.layout-toggle.layout-active svg {
  fill: white;
  width: 1em;
  height: 1em;
}
.layout-toggle .layout-icon {
  width: 1em;
  height: 1em;
  vertical-align: middle;
}

<a href="#">
  <div class="layout-toggle">
    <svg class="layout-icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" viewbox="0 0 17 16" style="enable-background:new 0 0 17 16;" xml:space="preserve">
      <g>
        <g>
          <g id="calendar-view-01">
            <g>
              <g id="Calender-Layout-Icon_no-border-1">
                <path d="M0.3,0h4v4h-4V0z M0.3,6h4v4h-4V6z M0.3,12h4v4h-4V12z M6.3,0h4v4h-4V0z M6.3,6h4v4h-4V6z M6.3,12h4v4h-4
                    						V12z M12.3,0h4v4h-4V0L12.3,0z M12.3,6h4v4h-4V6L12.3,6z M12.3,12h4v4h-4V12L12.3,12z" />
              </g>
            </g>
          </g>
        </g>
      </g>
    </svg>
  </div>
</a>

http://codepen.io/ourcore/pen/rjLmRM

Answer 1

那是因为你的<svg>默认情况下，元素以内联方式显示。如果您显式声明 display: block在元素上，高度将正确计算。

当行内显示处于事件状态时，由于以下事实，元素通常会具有“无法控制”的高度:

• 你cannot explicitly dictate vertical dimensions —内联元素的边距、填充、高度，导致不可预测的尺寸和
• 元素的垂直高度是influenced by line height从文本节点继承。

.layout-toggle {
  display: inline-block;
  padding: 10px;
  border: 1px solid grey;
}
.layout-toggle.layout-active {
  background-color: black;
}
.layout-toggle.layout-active svg {
  fill: white;
  width: 1em;
  height: 1em;
}
.layout-toggle .layout-icon {
  display: block; /* Use display: block to force proper height */
  width: 1em;
  height: 1em;
  vertical-align: middle;
}

<a href="#">
  <div class="layout-toggle">
    <svg class="layout-icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" viewbox="0 0 17 16" style="enable-background:new 0 0 17 16;" xml:space="preserve">
      <g>
        <g>
          <g id="calendar-view-01">
            <g>
              <g id="Calender-Layout-Icon_no-border-1">
                <path d="M0.3,0h4v4h-4V0z M0.3,6h4v4h-4V6z M0.3,12h4v4h-4V12z M6.3,0h4v4h-4V0z M6.3,6h4v4h-4V6z M6.3,12h4v4h-4
                    						V12z M12.3,0h4v4h-4V0L12.3,0z M12.3,6h4v4h-4V6L12.3,6z M12.3,12h4v4h-4V12L12.3,12z" />
              </g>
            </g>
          </g>
        </g>
      </g>
    </svg>
  </div>
</a>