Element rect w SVG
Element <rect> służy w SVG do rysowania prostokątów i kwadratów. SVG jest formatem grafiki wektorowej, więc kształt jest opisany kodem, a nie siatką pikseli jak w grafice rastrowej.
Najważniejsze atrybuty
width- szerokość figury,height- wysokość figury,x- położenie od lewej krawędzi obszaru SVG,y- położenie od górnej krawędzi obszaru SVG,fill- kolor wypełnienia,stroke- kolor obrysu,stroke-width- grubość obrysu,rx,ry- zaokrąglenie narożników.
Prostokąt czy kwadrat?
Jeżeli width i height mają taką samą wartość, element rect przedstawia kwadrat. Jeżeli wartości są różne, przedstawia prostokąt.
Przykład:
<svg width="200" height="150">
<rect width="100" height="100" fill="#ff0000" />
</svg>
Ten kod tworzy obszar SVG o wymiarach 200 × 150 pikseli, ale narysowana figura ma wymiary 100 × 100 pikseli. Ponieważ szerokość i wysokość figury są równe, jest to kwadrat.
Znaczenie koloru fill
Atrybut fill="#ff0000" oznacza wypełnienie kolorem czerwonym. Zapis #ff0000 to szesnastkowy zapis koloru RGB: maksymalna wartość czerwieni, brak zieleni i brak niebieskiego.
Na egzaminie trzeba odróżnić rozmiar całego obszaru <svg> od rozmiaru narysowanego elementu <rect>.