Maßstab SVG entlang andere Inhalte mit CSS Flexbox

stimmen
0

Ich möchte einen rechteckigen SVG zwischen zwei vertikal ausgerichteten DIVs angezeigt werden , so dass der SVG so viel Platz wie möglich in Anspruch nimmt (jedoch hält das Seitenverhältnis). Da die SVG selbst dynamisch erzeugt wird, muß ich das verwendet <svg>HTML - Tag , es zu schließen (und also kann einen nicht verwenden <img>Tag).

Also habe ich versucht Flexbox zu verwenden, aber die SVG klebt nicht an die Regeln und wird zu groß:

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>

Wenn ich die SVG mit einem anderen Inhalt ersetzt das Beispiel wie erwartet funktioniert.

Sie haben keine Ahnung, wie ich das ohne JS beteiligt realisieren kann?

Veröffentlicht am 09/10/2019 um 18:56
quelle vom benutzer
In anderen Sprachen...                            


1 antworten

stimmen
1

Sie müssen hinzufügen , width:100%;height:100%um die SVG und min-height:0den Mutter des Schrumpfeffekt zu ermöglichen ,

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>

Beantwortet am 09/10/2019 um 19:03
quelle vom benutzer

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more