SVG <rect>

SVG vormen

SVG biedt enkele vooraf gedefinieerde vormelementen aan ontwikkelaars aan:

• Rechthoek <rect>
• Cirkel <circle>
• Ovaal <ellipse>
• Rechte lijn <line>
• Lijnstuk <polyline>
• Veelhoek <polygon>
• Pad <path>

De volgende hoofdstukken beginnen met het uitleggen van elk element met de rect-elemement.

SVG rechthoek - <rect>

Voorbeeld 1

<rect> Het element wordt gebruikt om rechthoeken en varianten van rechthoekvormen te maken:

Dit is een SVG-code:

<svg width="400" height="110">
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>

Probeer het zelf uit

Code Uitleg:

• De width- en height-eigenschappen van het <rect>-element definiëren de hoogte en breedte van het rechthoekje
• De style-eigenschap wordt gebruikt om de CSS-eigenschappen van het rechthoekje te definiëren
• De CSS fill-eigenschap definieert de vulkleur van de rechthoek
• De CSS border-width-eigenschap definieert de breedte van de rand van de rechthoek
• De CSS stroke-eigenschap definieert de randkleur van de rechthoek

Voorbeeld 2

Laten we een ander voorbeeld zien met nieuwe eigenschappen:

Dit is een SVG-code:

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
</svg>

Probeer het zelf uit

Code Uitleg:

• De x-eigenschap definieert de linkse positie van het rechthoekje (bijvoorbeeld x="50" plaatst het rechthoekje op een afstand van 50 px van de linkse buitengrens)
• De y-eigenschap definieert de bovenste positie van het rechthoekje (bijvoorbeeld y="20" plaatst het rechthoekje op een afstand van 20 px van de bovenste buitengrens)
• De CSS fill-opacity-eigenschap definieert de ondoorzichtigheidswaarde van de vulkleur (geldig bereik: 0 tot 1)
• De CSS border-opacity-eigenschap definieert de ondoorzichtigheidswaarde van de penkleur (geldig bereik: 0 tot 1)

Voorbeeld 3

Definieer de ondoorzichtigheidswaarde van het hele element:

Dit is een SVG-code:

<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" />
</svg>

Probeer het zelf uit

Code Uitleg:

• De CSS opacity-eigenschap definieert de ondoorzichtigheidswaarde van het hele element (geldig bereik: 0 tot 1)

Voorbeeld 4

Laatste voorbeeld, maak een rechthoek met ronde hoeken:

Dit is een SVG-code:

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

Probeer het zelf uit

Code Uitleg:

• De rx en ry eigenschappen maken de hoeken van het rechthoekige gebied ronder