SVG <rect>

SVG-vormen

SVG heeft een aantal vooraf gedefinieerde vormelementen die door ontwikkelaars kunnen worden gebruikt:

In de volgende hoofdstukken wordt elk element uitgelegd, te beginnen met het rect-element.

Het <rect>-element wordt gebruikt om een rechthoek en variaties van een rechthoekige vorm te maken:

Hier is de SVG-code:

Code uitleg:

De attributen width en height van het element <rect> bepalen de hoogte en de breedte van de rechthoek
Het stijlkenmerk wordt gebruikt om CSS-eigenschappen voor de rechthoek te definiëren
De CSS fill-eigenschap definieert de vulkleur van de rechthoek
De CSS streekbreedte eigenschap definieert de breedte van de rand van de rechthoek
De CSS-lijneigenschap definieert de kleur van de rand van de rechthoek

Laten we eens kijken naar een ander voorbeeld dat enkele nieuwe attributen bevat:

Hier is de SVG-code:

Code uitleg:

Het x-attribuut definieert de linkerpositie van de rechthoek (bijv. x="50" plaatst de rechthoek 50 px vanaf de linkermarge)
Het y-attribuut definieert de bovenste positie van de rechthoek (bijv. y="20" plaatst de rechthoek 20 px vanaf de bovenmarge)
De CSS fill-opacity eigenschap definieert de dekking van de vulkleur (wettelijk bereik: 0 tot 1)
De CSS stroke-opacity eigenschap definieert de dekking van de lijnkleur (wettelijk bereik: 0 tot 1)

Definieer de dekking voor het hele element:

Hier is de SVG-code:

Code uitleg:

De CSS-ondoorzichtigheidseigenschap definieert de dekkingswaarde voor het hele element (wettelijk bereik: 0 tot 1)

Maak als laatste voorbeeld een rechthoek met afgeronde hoeken:

Hier is de SVG-code:

Code uitleg: