Почему выравнивание svg меняется, когда размер родительского div меньше 14px? - PullRequest
Новая
       30

Почему выравнивание svg меняется, когда размер родительского div меньше 14px?

1 голос
/ 24 марта 2020

Я хочу, чтобы svg была той же ширины / высоты, что и родительский div.

Я создал уменьшенный тестовый пример ниже простого svg внутри 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: 

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

Когда ширина / высота родительского div меньше 14px, svg больше не выравнивается внутри div. Почему это так?

1 Ответ

0 голосов
/ 24 марта 2020

Чтобы понять проблему, добавьте немного текста внутрь и используйте шрифт разных размеров: 

.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 выровнен с базовой линией текста, и если размер шрифта увеличивается, у вас будет переполнение. Та же логика c, если мы сохраним тот же размер шрифта и уменьшим высоту: 

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