SVG <rect>
- Forrige side SVG i HTML
- Næste side SVG cirkel
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
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)
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)
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.
- Forrige side SVG i HTML
- Næste side SVG cirkel