Почему SVG ширина 0, если контейнер отображен как гибкий? - PullRequest
Новая
       17

Почему SVG ширина 0, если контейнер отображен как гибкий?

2 голосов
/ 10 ноября 2019

Когда я запускаю следующий код в браузере: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
    svg {
      border:1px solid green;
      width:200px !important;
      height:200px;
    }
    #container {
      position:fixed;
      top:300px;
      left:800px;
      width:1px;
      height:1px;
      overflow:visible;

      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      align-content:center;
    }
    </style>
  </head>
  <body>
    <div id="container">
      <svg class="e3" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <circle cx="50" cy="50" r="50"/>
      </svg>
    </div>
  </body>
</html>

Все, что я получаю, это 2-пиксельная вертикальная линия в браузере. Кажется, ширина моего SVG равна 0 (не считая зеленых границ). Когда я удаляю правило css display:flex, появляется мой кружок SVG. Я пытался заставить свой SVG иметь width: 200px !important;, но это правило, похоже, не вступает в силу.

Почему мой SVG не соблюдает правило 200px, когда я использую display:flex для контейнера?

1 Ответ

2 голосов
/ 11 ноября 2019

Я полагаю, что ваш SVG-узел не отображается так, как вы ожидаете, потому что он имеет позицию по умолчанию static. Если вы измените узел SVG на absolute, вы получите желаемое поведение. 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <style>
    svg {
      position: absolute;
      border: 1px solid green;
      width: 200px;
      height: 200px;
    }
    
    #container {
      position: fixed;
      /* changed these for ease of viewing */
      top: 30px;
      left: 150px;
      width: 1px;
      height: 1px;
      overflow: visible;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-content: center;
      border: 1px solid red;
    }
  </style>
</head>

<body>
  <div id="container">
    <svg class="e3" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <circle cx="50" cy="50" r="50"/>
      </svg>
  </div>
</body>

</html>
...