为什么当父 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 {

  height: 30px;

  display:inline-block;

  vertical-align:top;

  background-color: red;

  margin:5px;

}

svg {

  width:20px;

}

<div class="box">

  A

  <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>

<div class="box" style="font-size:30px;">

  A

  <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>

<div class="box" style="font-size:40px;">

  A

  <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 {

  height: 40px;

  display:inline-block;

  vertical-align:top;

  background-color: red;

  margin:5px;

}

svg {

  width:40px;

}

<div class="box">

  A

  <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>

<div class="box" style="height:20px;">

  A

  <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" style="width:20px;">

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

  </svg>

</div>

<div class="box" style="height:10px;">

  A

  <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" style="width:10px;">

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

  </svg>

</div>

如果删除文本，行为将保持不变，因为基线不会改变：

.box {

  height: 40px;

  width:40px;

  display:inline-block;

  background-color: red;

  margin:5px;

  padding:2px;

}

<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>

<div class="box" style="height:20px;width:20px;">

  <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>

<div class="box" style="height:10px;width:10px;">

  <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>

<div class="box" style="height:5px;width:5px;">

  <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>

为了避免这种情况，只需调整对齐方式并使其与基线不同：

.box {

  height: 20px;

  width:20px;

  display:inline-block;

  background-color: red;

  margin:5px;

  padding:2px;

}

svg {

 vertical-align:top;

}

<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>

<div class="box" style="height:10px;width:10px;">

  <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>

<div class="box" style="height:5px;width:5px;">

  <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>

或者将字体大小重置为 0：

.box {

  height: 20px;

  width:20px;

  display:inline-block;

  background-color: red;

  margin:5px;

  padding:2px;

  font-size:0;

}

<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>

<div class="box" style="height:10px;width:10px;">

  <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>

<div class="box" style="height:5px;width:5px;">

  <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>