SVG <rect>

SVG former

SVG har nogle prædefinerede former, der er tilgængelige for udviklere:

• Rektangel <rect>
• Cirkel <circle>
• Ellipse <ellipse>
• Lige linje <line>
• Bøjningslinje <polyline>
• Mangekant <polygon>
• Sti <path>

De næste kapitler starter med at forklare hver element fra rect-elementet.

SVG rektangel - <rect>

Eksempel 1

<rect> Elementet bruges til at oprette rektangler samt varianter af rektanglar

Dette er SVG-koden:

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

Prøv det selv

Kodeforklaring:

• <rect>-elementets width og height-egenskaber definerer rektanglets højde og bredde
• style-egenskaben bruges til at definere rektanglets CSS-egenskaber
• CSS fill-egenskaben definerer rektanglets fyldfarve
• CSS border-width-egenskaben definerer rektanglets kantbredde
• CSS stroke-egenskaben definerer rektanglets kantfarve

Eksempel 2

Lad os se et andet eksempel, der inkluderer nye egenskaber:

Dette er SVG-koden:

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

Prøv det selv

Kodeforklaring:

• x-egenskaben definerer rektanglets venstre position (f.eks. x="50" placerer rektanglen 50 px fra venstre kant)
• y-egenskaben definerer rektanglets øverste position (f.eks. y="20" placerer rektanglen 20 px fra øverste kant)
• CSS fill-opacity-egenskaben definerer fyldfarves uigennemskinnelighed (gældende område: 0 til 1)
• CSS border-opacity-egenskaben definerer blyants farves uigennemskinnelighed (gældende område: 0 til 1)

Eksempel 3

Definerer elementets uigennemskinnelighed

Dette er SVG-koden:

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

Prøv det selv

Kodeforklaring:

• CSS opacity-egenskaben definerer elementets total uigennemskinnelighedsværdi (gældende område: 0 til 1)

Eksempel 4

Sidste eksempel, opret en rektangel med runde kanter:

Dette er SVG-koden:

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

Prøv det selv

Kodeforklaring:

• rx og ry egenskaber gør rektanglets kanter runde