Масштабируйте SVG вместе с другим контентом с помощью CSS flexbox - PullRequest
Новая
       18

Масштабируйте SVG вместе с другим контентом с помощью CSS flexbox

0 голосов
/ 09 октября 2019

Я хочу отобразить прямоугольный SVG между двумя вертикально выровненными DIV, чтобы SVG занимал как можно больше места (но сохранял соотношение сторон). Поскольку сам SVG генерируется динамически, я должен использовать HTML-тег <svg>, чтобы включить его (и т. Е. Не могу использовать тег <img>).

Поэтому я попытался использовать flexbox, ноSVG не придерживается правил и становится слишком большим: 

html, body, .parent {
  height: 100%;
}

.parent {
  display: flex;
  flex-flow: column nowrap;
}

.contentSVG {
  flex-grow: 1;
}
<div class="parent">
  <div class="contentA">
    content A
  </div>
  <div class="contentSVG">
    <!-- arbritrary SVG -->
    <svg viewBox="0 0 10 10">
      <circle cx="5" cy="5" r="5" fill="red" />
    </svg>
  </div>
  <div class="contentB">
    content B
  </div>
</div>

Если я заменил SVG другим контентом, пример будет работать, как и ожидалось.

У вас есть идеи, как я могу это реализовать безучаствует ли JS?

1 Ответ

1 голос
/ 09 октября 2019

Вам нужно добавить width:100%;height:100% к SVG и min-height:0 к родительскому , чтобы разрешить эффект сжатия 

html, body, .parent {
  height: 100%;
  margin:0;
}

.parent {
  display: flex;
  flex-flow: column nowrap;
}

.contentSVG {
  flex-grow: 1;
  min-height:0;
}
svg {
  width:100%;
  height:100%;
}
<div class="parent">
  <div class="contentA">
    content A
  </div>
  <div class="contentSVG">
    <!-- arbritrary SVG -->
    <svg viewBox="0 0 10 10">
      <circle cx="5" cy="5" r="5" fill="red" />
    </svg>
  </div>
  <div class="contentB">
    content B
  </div>
</div>
...