SVG <rect>

SVG har nogle prædefinerede formelementer, som udviklere kan bruge og manipulere.

SVG-former

SVG har nogle prædefinerede formelementer, som udviklere kan bruge og manipulere:

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

De næste kapitler vil forklare disse elementer, først starter med rektanglen.

<rect>-etiketten

<rect>-etiketten bruges til at oprette rektangler og deres varianter.

For at forstå, hvordan det fungerer, kopier disse koder til en teksteditor, og gem som "rect1.svg"-fil. Placer denne fil i web-mappen:

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

Kodeforklaring:

  • rect-elementets width og height-egenskaber kan definere højden og bredden af rektanglen
  • style-egenskaben bruges til at definere CSS-egenskaber
  • CSS' fill-egenskab definerer fyldfarven på rektanglen (rgb-værdi, farvenavn eller hexadecimal værdi)
  • CSS' stroke-width-egenskab definerer bredden af rektanglens kantlinje
  • CSS' stroke-egenskab definerer farven på rektanglens kantlinje

Se dette eksempel

Lad os se på et andet eksempel, der indeholder nye egenskaber:

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

Eksempel forklaring:

  • x-egenskaben definerer placeringen af venstre side af rektanglen (f.eks., x="0" definerer afstanden fra rektanglen til venstre side af browservinduet er 0px)
  • y-egenskaben definerer placeringen af toppen af rektanglen (f.eks., y="0" definerer afstanden fra rektanglen til toppen af browservinduet er 0px)
  • CSS' fill-opacity-egenskab definerer gennemsigtigheden af farven på fyldningen (gældende interval er: 0 - 1)
  • CSS' stroke-opacity-egenskab definerer gennemsigtigheden af farven på kantlinjen (gældende interval er: 0 - 1)

Se eksempel

definerer gennemsigtighed for hele elementet:

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

Kodeforklaring:

CSS opacity egenskab definerer den samlede gennemsigtighed for hele elementet (gældende område: 0 - 1)

Se eksempel

Sidste eksempel, opret en rektangel med runde kanter:

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

Kodeforklaring:

rx og ry egenskaber kan gøre rektanglen have runde kanter.

Se eksempel