SVG <rect>

SVG heeft enkele vooraf gedefinieerde vormelementen die door ontwikkelaars kunnen worden gebruikt en gecontroleerd.

SVG-vormen

SVG heeft enkele vooraf gedefinieerde vormelementen die door ontwikkelaars kunnen worden gebruikt en gecontroleerd:

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

De volgende hoofdstukken zullen je uitleggen over deze elementen, beginnend met het rechthoekje-element.

<rect>-tag

<rect>-tag kan worden gebruikt om rechthoekjes te maken, evenals varianten van rechthoekjes.

Om het werkingssyteem te begrijpen, kopieer deze code naar een notitieblok en sla het op als een "rect1.svg"-bestand. Plaats dit bestand in de webdirectory:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>
</svg>

Code Explanation:

  • De width- en height-eigenschappen van de rect-elementen kunnen de hoogte en breedte van het rechthoekje definiëren
  • De style-eigenschap wordt gebruikt om CSS-eigenschappen te definiëren
  • De fill-eigenschap van CSS definieert de kleur van de vulling van het rechthoekje (rgb-waarden, kleurnaam of hexadecimaal waarde)
  • De stroke-width-eigenschap van CSS definieert de breedte van de rand van het rechthoekje
  • De stroke-eigenschap van CSS definieert de kleur van de rand van het rechthoekje

Bekijk dit voorbeeld

Laten we een ander voorbeeld bekijken dat nieuwe eigenschappen bevat:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
fill-opacity:0.1;stroke-opacity:0.9"/>
</svg>

Voorbeeldverklaring:

  • De x-eigenschap definieert de positie van de linkerkant van het rechthoekje (bijvoorbeeld, x="0" definieert de afstand van het rechthoekje tot de linkerkant van het browservenster als 0px)
  • De y-eigenschap definieert de positie van de bovenkant van het rechthoekje (bijvoorbeeld, y="0" definieert de afstand van het rechthoekje tot de bovenkant van het browservenster als 0px)
  • De fill-opacity-eigenschap van CSS definieert de transparantie van de vulkleur (de geldige bereik is: 0 - 1)
  • De stroke-opacity-eigenschap van CSS definieert de transparantie van de penkleur (de geldige bereik is: 0 - 1)

View Example

Definieert de transparentheid van het hele element:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
opacity:0.9"/>
</svg>

Code Explanation:

The CSS opacity property defines the transparency value of the entire element (the valid range is: 0 - 1)

View Example

The last example, creating a rectangle with rounded corners:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" rx="20" ry="20" width="250"
height="100" style="fill:red;stroke:black;
stroke-width:5;opacity:0.5"/>
</svg>

Code Explanation:

De rx en ry-eigenschappen maken de rechthoek afgerond.

View Example