div 的自动高度不符合其 SVG 图标子项的高度

Posted

技术标签:

【中文标题】div 的自动高度不符合其 SVG 图标子项的高度【英文标题】:Auto height of div doesn't adhere to height of its SVG icon child 【发布时间】:2017-07-20 16:14:45 【问题描述】:

我创建了一个 SVG 图标组件,它使用以下代码将 SVG 图标包装在父元素中:

HTML

<div class="icon-wrapper">
  <svg class="icon">
    <!--
    The "icon-search" symbol comes from a SVG sprite in the doc body.
    See live demo below...
    -->
    <use xlink:href="#icon-search"></use>
  </svg>
</div>

CSS

body 
  font-size: 48px;
  color: black;


.icon-wrapper 
  background-color: lightgreen;


.icon 
  width: 1em;
  height: 1em;

  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;

  background-color: red;

即使包装 div 的高度设置为auto(它的初始值),它也会以某种方式在其底部添加一些填充,因此比周围的 SVG 高几个像素。绿色区域不应该在那里:

这是为什么?

这是一个你可以玩的活生生的例子:https://jsbin.com/huyojeniwi/1/edit?html,css,output

【问题讨论】:

【参考方案1】:

这是因为 svg 图像是内联元素,浏览器会从底部为“p”、“q”、“y”等“长”符号保存 spase。

有几种解决方案: 第一:

.icon display: block;

第二:

.icon-wrapper  font-size: 0;  .icon  font-size: 48px; 

第三

.icon-wrapper  line-heigth: 1em;  .icon  vertical-align: top 

【讨论】:

感谢您提供有关空间为何实际存在的其他信息! @disstruct 这叫 kerning 而不是 spase,阅读更多关于内联框的信息 @ 987654321@ @AbhishekPandey 不,这不是他们是下降者,字距调整是关于相邻字形之间的空间。 @RobertLongson 哦!我不知道他们是descenders,谢谢指正。 :)【参考方案2】:

这是因为svg 标签是inline-block 元素,将line-height:0; 设置为父元素将解决它。

内联框从其块父元素继承可继承的属性,例如font-sizeline-height 等,并创建空间/边距。

For more info

body 
  font-size: 48px;
  color: black;


.icon-wrapper 
  background-color: lightgreen;
  line-height: 0;


.icon 
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
  background-color: red;
<!-- Inlined SVG sprite -->
<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <symbol id="icon-search" viewBox="0 0 26 28">
        <title>search</title>
        <path d="M18 13c0-3.859-3.141-7-7-7s-7 3.141-7 7 3.141 7 7 7 7-3.141 7-7zM26 26c0 1.094-0.906 2-2 2-0.531 0-1.047-0.219-1.406-0.594l-5.359-5.344c-1.828 1.266-4.016 1.937-6.234 1.937-6.078 0-11-4.922-11-11s4.922-11 11-11 11 4.922 11 11c0 2.219-0.672 4.406-1.937 6.234l5.359 5.359c0.359 0.359 0.578 0.875 0.578 1.406z"></path>
      </symbol>
    </defs>
  </svg>

<div class="icon-wrapper">
  <svg class="icon">
      <use xlink:href="#icon-search"></use>
    </svg>
</div>

【讨论】:

以上是关于div 的自动高度不符合其 SVG 图标子项的高度的主要内容,如果未能解决你的问题,请参考以下文章

增加包含浮动嵌套 div 的父 div 的高度

如何根据子 SVG 内容对齐父 div 高度

反应:使div的宽度等于高度。高度计算不正确

如何根据子内容的高度为父 div 赋予高度

如何调整 SVG 社交图标的宽度和高度?

条形高度占据 viewBox 响应式 SVG 的整个高度