27.2. fejezet: SVG téglalap
Az SVG számtalan geometriai alakzatot képes megjeleníteni, pl.: téglalap, kör, ellipszis, vonal, sokszög, útvonal. Ezek közül legegyszerűbb a téglalap. Az alábbi példa egy 400x100-as kék kitöltésű 3 képpont vastag fekete keretű téglalapot rajzol ki.
<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>
Látható, hogy míg az előző kódban darabonként került szabályozásra az összes paraméter, addig itt egyszerre történt meg mindez.
A következő példában egy újabb téglalap következzen, de ezúttal kicsit játsszunk az átlátszósággal is! (htmlpelda70.html)
<html>
<body>
<h1>SVG 2. téglalap</h1>
<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>
</body>
</html>
A kód magyarázata:
- Az x a bal oldali kezdő koordinátát jelöli.
- Az y a felülről számolt kezdő koordinátát jelöli.
- A fill, stroke és stroke-width jelentése az előzőekben tárgyalásra került.
- A fill-opacity a kitöltőszín átlátszóságát jelöli. (Megengedett tartomány: 0 és 1 között.)
- Hasonlóan a stroke-opacity a keretszín átlátszóságát jelöli. (Megengedett tartomány: 0 és 1 között.)
- A két átlátszóságot egyesíthetjük egyetlen opacity paraméterben is, pl.: opacity:0.5.
A létrehozott téglalap sarkait le is kerekíthetjük. Például a következő esetben 25 széles körrel kerekítjük le a sarkakat:
<svg width="400" height="180">
<rect x="50" y="20" rx="25" ry="25" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
A fejezet leghitelesebb forrása: https://www.w3schools.com/graphics/svg_rect.asp