SVG Auto Scale Höhe

Question

Ich versuche, mit svg Kreise zu erstellen, und ich kämpfe darum, die Höhe der SVG relativ zum Inhalt zu bestimmen. Ich weiß, ich könnte nur die Breite und Höhe einstellen, aber dann wären die Kreise nicht so nah beieinander. Höhe automatisch und Breite 100% scheinen bei der Anwendung auf SVG nicht zu funktionieren. Hier ist mein aktuelles HTML und CSS. Ich poste, um zu sehen, ob jemand eine Lösung hat, die mir nicht bekannt ist. Ich habe mehrere Kombinationen aus anderen Posts ausprobiert und nichts scheint es zu schaffen. Vielen Dank im Voraus.

<div>
        <svg>
            <circle cx="50%" cy="50%" r="120" stroke-width="5" fill="Blue"></circle>
        </svg>
        
        <svg>
            <circle cx="50%" cy="50%" r="100" stroke-width="5" fill="Blue"></circle>
        </svg>
</div>


body {
    height: 100%;
    margin: 0;
}
        
body {
    background-color: Yellow;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

Problem: Kreise werden abgeschnitten, da SVG voreingestellte Höhen und Breiten hat, die ich im Verhältnis zum erforderlichen Inhalt nicht herausfinden kann.

Answer 1

Beachten Sie zunächst, dass in HTML jedes ersetzte Element wie folgt:

• <img>
• <svg>
• <canvas> usw.

hat eine Standardgröße von 300pxbreit, 150pxhoch.

Wenn Sie dem ersetzten Element keine expliziten Dimensionen geben, werden diese Dimensionen übernommen.

---

Das gesuchte Tool ist die SVG-ViewBox .

Wenn Sie a viewBoxfür eine SVG deklarieren , bedeutet dies, dass Sie ihr einen eigenen Satz von Dimensionen relativ zu sich selbst geben .

Diese Dimensionen im Verhältnis zum Selbst unterscheiden sich von den Vorgängen auf der restlichen Seite und, was wichtig ist, auch von den Dimensionen im Verhältnis zum Kontext .

Im folgenden Beispiel habe ich dem ersten <svg>Folgendes gegeben viewBox:

viewBox="0 0 240 240"

Dies bedeutet, dass wenn es ein <circle>untergeordnetes Element mit einem Radius von hat 120, der Kreis im Wesentlichen das füllt <svg>.

Aber wenn ich das ändere viewBoxzu:

viewBox="0 0 480 480" // (ie. twice the size)

dann <circle>füllt der Wille jetzt nur noch die Hälfte aus <svg>.

Und Sie können die Größe des Kreises weiter ändern, indem Sie die Größe des viewBoxübergeordneten SVG ändern, auch wenn (dies ist das clevere Bit) die kontextbezogenen Dimensionen des <svg>verbleibenden Kreises :

• width: 100px;
• height: 100px;

oder wie groß oder klein Sie möchten <svg>, dass das auf der Seite ist.

---

Arbeitsbeispiel:

body {
  background-color: rgb(255, 255, 0);
}

svg {
  display: block;
  width: 100%;
}

svg:nth-of-type(1) {
  height: 240px;
}

svg:nth-of-type(2) {
  height: 200px;
}

svg circle {
  fill: rgb(0, 0, 255);
}

<div>
<svg viewBox="0 0 240 240">
<circle cx="50%" cy="50%" r="120" stroke-width="5"></circle>
</svg>
        
<svg viewBox="0 0 200 200">
<circle cx="50%" cy="50%" r="100" stroke-width="5"></circle>
</svg>
</div>