Κλίμακα SVG μαζί άλλου περιεχομένου με CSS flexbox

ψήφοι
0

Θέλω να εμφανίσει ένα ορθογώνιο SVG ανάμεσα σε δύο κάθετα ευθυγραμμισμένες divs, έτσι ώστε η SVG καταλαμβάνει τόσο χώρο όσο το δυνατόν (αλλά διατηρεί αναλογία του). Καθώς η ίδια η SVG δημιουργείται δυναμικά, έχω να χρησιμοποιήσει το <svg>tag HTML για να συμπεριλάβει (και δηλαδή δεν μπορεί να χρησιμοποιήσει μια <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 εμπλέκονται;

Δημοσιεύθηκε 09/10/2019 στις 18:56
πηγή χρήστη
Σε άλλες γλώσσες...                            


1 απαντήσεις

ψήφοι
1

Θα πρέπει να προσθέσετε 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>

Απαντήθηκε 09/10/2019 στις 19:03
πηγή χρήστη

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