SVG <rect>

SVG-form

SVG har några fördefinierade formelement som utvecklare kan använda:

• Rektangel <rect>
• Cirkel <circle>
• Ellips <ellipse>
• Rakt linje <line>
• Böjlig linje <polyline>
• Polygon <polygon>
• Väg <path>

Följande kapitel börjar med att förklara varje element från rect-elementet.

SVG rektangel - <rect>

Exempel 1

<rect> Elementet används för att skapa rektanglar och varianter av rektanglar:

Detta är 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>

Prova själv

Kodförklaring:

• <rect>-elementets width och height-attribut definierar höjden och bredden på rektangeln
• style-attribut används för att definiera CSS-attribut för rektangeln
• CSS fill egenskap definierar fyllningsfärgen för rektangeln
• CSS border-width egenskap definierar kantens bredd för rektangeln
• CSS stroke egenskap definierar kantfärgen för rektangeln

Exempel 2

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

Detta är 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>

Prova själv

Kodförklaring:

• x-attribut definierar rektanglets vänstra position (t.ex. x="50" placerar rektangenten 50 px från vänstra kant)
• y-attribut definierar rektanglets toppposition (t.ex. y="20" placerar rektangenten 20 px från övre kant)
• CSS fill-opacity egenskap definierar färgens ogenomskinlighet för fyllningen (giltigt intervall: 0 till 1)
• CSS border-opacity egenskap definierar färgens ogenomskinlighet för kantlinjen (giltigt intervall: 0 till 1)

Exempel 3

Definiera elementets ogenomskinlighet:

Detta är 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>

Prova själv

Kodförklaring:

• CSS opacity egenskap definierar elementets ogenomskinlighet (giltigt intervall: 0 till 1)

Exempel 4

Sista exempel, skapa rektangel med runda hörn:

Detta är 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>

Prova själv

Kodförklaring:

• rx och ry-attributen gör hörnen av rektanglarna runda