SVG <rect>

SVG har några fördefinierade formerselement som utvecklare kan använda och manipulera.

SVG-former

SVG har några fördefinierade formerselement som utvecklare kan använda och manipulera:

  • Rektangel <rect>
  • Cirkel <circle>
  • Ellipse <ellipse>
  • Linje <line>
  • Böjlinje <polyline>
  • Polygon <polygon>
  • Väg <path>

Följande kapitel kommer att förklara dessa element, börjar med rektaglelementen.

<rect>-tagget

<rect>-tagget används för att skapa rektanglar samt varianter av rektanglar.

För att förstå hur det fungerar, kopiera denna kod till enanteckningsbok och spara den som "rect1.svg"-fil. Placera denna fil i webkatalogen:

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

Kodförklaring:

  • rect-elementets width- och height-attribut kan definiera höjden och bredden på rektangeln
  • style-attributet används för att definiera CSS-egenskaper
  • CSS-egenskapen fill definierar fyllfärgen för rektangeln (rgb-värden, färgnamn eller hex-värden)
  • CSS-egenskapen stroke-width definierar bredden på rektangelns kant
  • CSS-egenskapen stroke definierar färgen på rektangelns kant

Se detta exempel

Låt oss titta på ett annat exempel som innehåller nya egenskaper:

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

Exempel förklaring:

  • x-attributet definierar vänsterpositionen för rektangeln (t.ex., x="0" definierar avståndet från rektangelns vänster kant till webbläsarens vänster kant är 0px)
  • y-attributet definierar toppositionen för rektangeln (t.ex., y="0" definierar avståndet från rektangelns topp till webbläsarens topp är 0px)
  • CSS-egenskapen fill-opacity definierar transparensen för fyllfärgen (giltigt intervall är: 0 - 1)
  • CSS-egenskapen stroke-opacity definierar transparensen för kantfärgen (giltigt intervall är: 0 - 1)

Visa exempel

Definiera transparens för hela 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>

Kodförklaring:

CSS opacity-egenskapen definierar den totala genomblickningsvärdet för ett element (giltigt intervall är: 0 - 1)

Visa exempel

Sista exemplet, skapa en rektangel med rundade hörn:

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

Kodförklaring:

rx- och ry-egenskaperna gör det möjligt att skapa rundade hörn på rektanglar.

Visa exempel