为什么当父div为<时svg对齐方式会改变？大小为14px？ [英] Why does svg alignment change when parent div is < 14px in size?

问题描述

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

I want the svg to be the same width/height as the parent div.

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

I've created a reduced test case below of a simple svg inside a div:

<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的大小：

Changing the parent width/height will change the size of the svg:

.box {
  width: 20px;
  height: 20px;
  background-color: red;
}

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

When the parent div width/height is less than 14px, the svg is no longer aligned inside the div. Why is this the case?

推荐答案

要了解此问题，请在内部添加一些文本并使用不同的字体-sizes：

To understand the issue add some text inside and use different font-sizes:

.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与文本的基线对齐，并且如果字体大小不断增加，您将发生溢出。如果我们保持相同的字体大小并减小高度，则逻辑相同：

You can clearly see that the SVG is aligned with the baseline of the text and if the font-size is growing you will have an overflow. Same logic if we keep the same font-size and we decrease the height:

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

删除文本，由于基线不会更改，因此行为将保持不变：

And if you remove the text, the behavior will be kept the same since the baseline won't change:

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

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

To avoid this, simply adjust the alignment and make it different from baseline:

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

Or reset the font-size to 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>

这篇关于为什么当父div为<时svg对齐方式会改变？大小为14px？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！