Altezza della scala automatica SVG

Question

Sto cercando di creare cerchi usando svg e sto lottando per rendere l'altezza dell'SVG rispetto al contenuto. So che potrei semplicemente impostare la larghezza e l'altezza, ma poi i cerchi non sarebbero così vicini l'uno all'altro. L'altezza automatica e la larghezza al 100% non sembrano funzionare quando si applica su SVG, ecco il mio HTML e css corrente. Sto postando per vedere se qualcuno ha una soluzione di cui non sono a conoscenza, ho provato più combinazioni da altri post e niente sembra riuscirci. Grazie in anticipo.

<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;
}

Problema: i cerchi vengono tagliati perché SVG ha un'altezza e una larghezza preimpostate che non riesco a capire come fare in relazione al contenuto richiesto.

Answer 1

Prima di tutto, nota che in HTML, qualsiasi elemento sostituito come:

• <img>
• <svg>
• <canvas> eccetera.

ha una dimensione predefinita di 300pxlargo, 150pxalto.

Se non dai dimensioni esplicite all'elemento sostituito, queste sono le dimensioni che adotterà.

---

Lo strumento che stai cercando è il viewBox SVG .

Se dichiari a viewBoxper un SVG, è come dargli il proprio insieme di dimensioni relative a sé .

Queste dimensioni relative al sé sono separate da ciò che sta succedendo, nel resto della pagina e, cosa importante, sono anche separate dalle sue dimensioni relative al contesto .

Nell'esempio seguente, ho dato il primo <svg>quanto segue viewBox:

viewBox="0 0 240 240"

questo significa che se ha un <circle>elemento figlio con un raggio di 120, allora il cerchio, essenzialmente, riempirà il <svg>.

Ma se cambio il viewBoxin:

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

quindi <circle>ora riempirà solo metà del file <svg>.

E puoi continuare a cambiare la dimensione del cerchio cambiando il viewBoxgenitore SVG anche quando (questo è il bit intelligente) le dimensioni relative al contesto <svg>rimangono:

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

o comunque grande o piccolo si desidera <svg>che sia sulla pagina.

---

Esempio di lavoro:

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>