为什么当父 div 大小 < 14px 时 svg 对齐方式会发生变化？

Question

我希望 svg 与父 div 具有相同的宽度/高度。

我在下面创建了一个 div 内的简单 svg 的简化测试用例：

<div class="box">

  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

       viewBox="0 0 50 50">

    <rect width="50" height="50"/>

  </svg>

</div>

更改父级宽度/高度将更改 svg 的大小：

.box {

  width: 20px;

  height: 20px;

  background-color: red;

}

当父 div 宽度/高度小于 14px 时，svg 不再在 div 内对齐。为什么会这样呢？

Answer 1

要了解问题，请在其中添加一些文本并使用不同的字体大小：.box {&nbsp; height: 30px;&nbsp; display:inline-block;&nbsp; vertical-align:top;&nbsp; background-color: red;&nbsp; margin:5px;}svg {&nbsp; width:20px;}<div class="box">&nbsp; A&nbsp; <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"&nbsp; &nbsp; &nbsp; &nbsp;viewBox="0 0 50 50">&nbsp; &nbsp; <rect width="50" height="50"/>&nbsp; </svg></div><div class="box" style="font-size:30px;">&nbsp; A&nbsp; <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"&nbsp; &nbsp; &nbsp; &nbsp;viewBox="0 0 50 50">&nbsp; &nbsp; <rect width="50" height="50"/>&nbsp; </svg></div><div class="box" style="font-size:40px;">&nbsp; A&nbsp; <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"&nbsp; &nbsp; &nbsp; &nbsp;viewBox="0 0 50 50">&nbsp; &nbsp; <rect width="50" height="50"/>&nbsp; </svg></div>您可以清楚地看到 SVG 与文本的基线对齐，如果字体大小增大，则会出现溢出。如果我们保持相同的字体大小并减小高度，则逻辑相同：.box {&nbsp; height: 40px;&nbsp; display:inline-block;&nbsp; vertical-align:top;&nbsp; background-color: red;&nbsp; margin:5px;}svg {&nbsp; width:40px;}<div class="box">&nbsp; A&nbsp; <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"&nbsp; &nbsp; &nbsp; &nbsp;viewBox="0 0 50 50">&nbsp; &nbsp; <rect width="50" height="50"/>&nbsp; </svg></div><div class="box" style="height:20px;">&nbsp; A&nbsp; <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"&nbsp; &nbsp; &nbsp; &nbsp;viewBox="0 0 50 50" style="width:20px;">&nbsp; &nbsp; <rect width="50" height="50"/>&nbsp; </svg></div><div class="box" style="height:10px;">&nbsp; A&nbsp; <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"&nbsp; &nbsp; &nbsp; &nbsp;viewBox="0 0 50 50" style="width:10px;">&nbsp; &nbsp; <rect width="50" height="50"/>&nbsp; </svg></div>如果删除文本，行为将保持不变，因为基线不会改变：.box {&nbsp; height: 40px;&nbsp; width:40px;&nbsp; display:inline-block;&nbsp; background-color: red;&nbsp; margin:5px;&nbsp; padding:2px;}<div class="box">&nbsp; <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"&nbsp; &nbsp; &nbsp; &nbsp;viewBox="0 0 50 50">&nbsp; &nbsp; <rect width="50" height="50"/>&nbsp; </svg></div><div class="box" style="height:20px;width:20px;">&nbsp; <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"&nbsp; &nbsp; &nbsp; &nbsp;viewBox="0 0 50 50">&nbsp; &nbsp; <rect width="50" height="50"/>&nbsp; </svg></div><div class="box" style="height:10px;width:10px;">&nbsp; <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"&nbsp; &nbsp; &nbsp; &nbsp;viewBox="0 0 50 50">&nbsp; &nbsp; <rect width="50" height="50"/>&nbsp; </svg></div><div class="box" style="height:5px;width:5px;">&nbsp; <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"&nbsp; &nbsp; &nbsp; &nbsp;viewBox="0 0 50 50">&nbsp; &nbsp; <rect width="50" height="50"/>&nbsp; </svg></div>为了避免这种情况，只需调整对齐方式并使其与基线不同：.box {&nbsp; height: 20px;&nbsp; width:20px;&nbsp; display:inline-block;&nbsp; background-color: red;&nbsp; margin:5px;&nbsp; padding:2px;}svg {&nbsp;vertical-align:top;}<div class="box">&nbsp; <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"&nbsp; &nbsp; &nbsp; &nbsp;viewBox="0 0 50 50">&nbsp; &nbsp; <rect width="50" height="50"/>&nbsp; </svg></div><div class="box" style="height:10px;width:10px;">&nbsp; <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"&nbsp; &nbsp; &nbsp; &nbsp;viewBox="0 0 50 50">&nbsp; &nbsp; <rect width="50" height="50"/>&nbsp; </svg></div><div class="box" style="height:5px;width:5px;">&nbsp; <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"&nbsp; &nbsp; &nbsp; &nbsp;viewBox="0 0 50 50">&nbsp; &nbsp; <rect width="50" height="50"/>&nbsp; </svg></div>或者将字体大小重置为 0：.box {&nbsp; height: 20px;&nbsp; width:20px;&nbsp; display:inline-block;&nbsp; background-color: red;&nbsp; margin:5px;&nbsp; padding:2px;&nbsp; font-size:0;}<div class="box">&nbsp; <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"&nbsp; &nbsp; &nbsp; &nbsp;viewBox="0 0 50 50">&nbsp; &nbsp; <rect width="50" height="50"/>&nbsp; </svg></div><div class="box" style="height:10px;width:10px;">&nbsp; <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"&nbsp; &nbsp; &nbsp; &nbsp;viewBox="0 0 50 50">&nbsp; &nbsp; <rect width="50" height="50"/>&nbsp; </svg></div><div class="box" style="height:5px;width:5px;">&nbsp; <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"&nbsp; &nbsp; &nbsp; &nbsp;viewBox="0 0 50 50">&nbsp; &nbsp; <rect width="50" height="50"/>&nbsp; </svg></div>