W3docs
it
Accedi

Rettangolo SVG

Su questa pagina trovi informazioni sull'elemento SVG <rect>, impara a creare un rettangolo e vedi esempi con CSS.

L'elemento SVG <rect> disegna un rettangolo. È una delle forme SVG di base (insieme a <circle>, <ellipse>, <line> e <polygon>) e viene inserito direttamente all'interno di un elemento <svg>. Questa pagina spiega come posizionare e dimensionare un rettangolo, come arrotondarne gli angoli e come controllarne il riempimento e il bordo utilizzando gli attributi di presentazione o CSS.

Se SVG è nuovo per te, inizia con l'introduzione a SVG. Per un elenco completo di attributi ed elementi, consulta il riferimento SVG.

Descrizione dell'elemento <rect>

L'elemento SVG <rect> crea un rettangolo, nonché varianti della forma rettangolare. È possibile disegnare rettangoli di diverse altezze e larghezze, con diversi colori di bordo e riempimento, ecc. Vedremo alcuni esempi.

Il sistema di coordinate SVG

Un rettangolo viene posizionato con gli attributi x e y, misurati dall'angolo in alto a sinistra del canvas SVG. L'asse x cresce verso destra e l'asse y cresce verso il basso (quindi un valore maggiore di y sposta la forma più in basso sullo schermo). Queste coordinate sono espresse in unità utente, che per impostazione predefinita corrispondono ai pixel ma possono essere rimappate con l'attributo viewBox. Gli attributi principali di <rect> sono:

  • x — la posizione orizzontale del bordo sinistro del rettangolo. Il valore predefinito è 0 se omesso.
  • y — la posizione verticale del bordo superiore del rettangolo. Il valore predefinito è 0 se omesso.
  • width — la larghezza del rettangolo. Il valore predefinito è 0, il che rende il rettangolo invisibile, quindi è quasi sempre necessario impostarlo.
  • height — l'altezza del rettangolo. Anche questo ha valore predefinito 0 (invisibile).
  • rx — il raggio orizzontale utilizzato per arrotondare gli angoli (opzionale).
  • ry — il raggio verticale utilizzato per arrotondare gli angoli (opzionale).

Esempio dell'elemento SVG <rect>:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="350" height="120">
      <rect width="250" height="110" style="fill:rgb(53, 153, 0);stroke-width:1;stroke:rgb(32, 33, 49)" />
    </svg>
  </body>
</html>
Provalo tu stesso »

Ora spieghiamo questo codice:

  • Gli attributi width e height specificano la larghezza e l'altezza del rettangolo.
  • L'attributo style specifica alcune proprietà CSS per il rettangolo.
  • La proprietà CSS fill specifica il colore di riempimento del rettangolo.
  • La proprietà CSS stroke-width viene utilizzata per specificare la larghezza del bordo del rettangolo.
  • La proprietà CSS stroke specifica il colore del bordo del rettangolo.

Attributi di presentazione vs. CSS

Gli stili fill, stroke e stroke-width mostrati sopra possono anche essere scritti come attributi di presentazione direttamente sull'elemento, invece che all'interno di un attributo style. I due frammenti di codice seguenti sono equivalenti:

<!-- Using a CSS style attribute -->
<rect width="250" height="110"
      style="fill:green;stroke:darkgray;stroke-width:5" />

<!-- Using presentation attributes -->
<rect width="250" height="110"
      fill="green" stroke="darkgray" stroke-width="5" />

Gli attributi di presentazione sono comodi e leggibili, ma hanno la priorità più bassa: qualsiasi regola CSS corrispondente (in un foglio di stile o in un attributo style) li sovrascrive. Usa gli attributi di presentazione per forme semplici e statiche, e CSS quando vuoi riutilizzare gli stili o modificarli al passaggio del mouse. Per saperne di più sui bordi, consulta SVG stroking.

Esempio dell'elemento SVG <rect> con gli attributi x e y:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="250">
      <rect x="80" y="50" width="180" height="180" style="fill:lightcoral;stroke:purple;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
      Sorry, inline SVG isn't supported by your browser.  
    </svg>
  </body>
</html>
Provalo tu stesso »

Spieghiamo il codice sopra:

  • L'attributo x specifica la posizione sinistra del rettangolo.
  • L'attributo y specifica la posizione superiore del rettangolo.
  • Per impostazione predefinita, se x e y vengono omessi, vengono impostati a 0.
  • La proprietà CSS fill-opacity specifica l'opacità del colore di riempimento.
  • La proprietà CSS stroke-opacity specifica l'opacità del colore del bordo.

Esempio dell'elemento SVG <rect> con la proprietà CSS opacity:

<!DOCTYPE html>
<html>
  <body>
    <svg width="400" height="180">
      <rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />
      Sorry, inline SVG is not supported by your browser.  
    </svg>
  </body>
</html>
Provalo tu stesso »

Spieghiamo il codice sopra:

  • La proprietà CSS opacity imposta la trasparenza dell'intero rettangolo — sia il riempimento che il bordo insieme — dove 1 è completamente opaco e 0 è completamente trasparente.
  • Questo differisce dall'esempio precedente: fill-opacity e stroke-opacity rendono il riempimento e il bordo trasparenti indipendentemente, mentre opacity si applica all'elemento come un'unica unità (quindi un bordo e un riempimento sovrapposti si fondono con ciò che si trova dietro la forma, non tra di loro).

Esempio dell'elemento SVG <rect> con gli attributi rx e ry:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="350" height="240">
      <rect x="70" y="50" rx="30" ry="30" width="170" height="170" style="fill:green;stroke:darkgray;stroke-width:5;opacity:0.7" />
      Sorry, inline SVG isn't supported by your browser.
    </svg>
  </body>
</html>
Provalo tu stesso »

Spieghiamo il codice sopra:

  • L'attributo rx specifica il raggio orizzontale degli angoli arrotondati del rettangolo.
  • L'attributo ry specifica il raggio verticale degli angoli arrotondati del rettangolo.

La regola di copia rx/ry (attenzione): se imposti solo uno di questi attributi, il browser usa lo stesso valore per l'altro. Quindi rx="30" senza ry produce angoli arrotondati di 30 in entrambe le direzioni — esattamente come se avessi scritto rx="30" ry="30". Per ottenere angoli genuinamente ellittici (asimmetrici), devi assegnare valori diversi a rx e ry. Se nessuno dei due viene impostato, gli angoli rimangono squadrati. Ogni raggio viene inoltre limitato al massimo alla metà della larghezza (rx) o dell'altezza (ry) del rettangolo.

Capitoli SVG correlati

  • Introduzione a SVG — l'elemento <svg>, il sistema di coordinate e viewBox.
  • SVG stroking — controlla i bordi con stroke, stroke-width e tratteggi.
  • SVG polygon — disegna forme a più lati da un elenco di punti.
  • Riferimento SVG — ogni elemento e attributo SVG in un unico posto.

Esercizio

Pratica
Se un rettangolo SVG ha rx='40' ma nessun attributo ry impostato, come vengono arrotondati i suoi angoli?
Se un rettangolo SVG ha rx='40' ma nessun attributo ry impostato, come vengono arrotondati i suoi angoli?
Was this page helpful?