Proste kształty: prostokąt

Zaczniemy od czegoś prostego. By umieścić w kodzie HTML kod svg niezbędne jest zdefiniowanie obszaru rysowania. Robimy to następująco:
<svg width="800" height="400"><!--tutaj treść kodu --></svg>
Ważne jest zdefiniowanie rozmariu obszaru (w powyższy sposób bądź z pomocą CSS), gdyż domyślny rozmiar jest definiowany w zależności od przeglądarki.
Zaczniemy od prostego przykładu i narysujemy prostokąt:
Zastosuj
Przywróć
Wyczyść
Pora zapoznać się z naszym dynamicznym edytorem kodu. Po prawej stronie znajduje się ramka z kodem źródłowym, zaś po lewej można obserwować jego efekty. Po każdej zmianie kodu musisz zatwierdzić je przyciskiem "Odśwież". Przycisk "Przywróć" odtwarza domyślny kod zaprezentowanego przykładu. Dzięki niemu możesz bawić się do woli zmieniając kod i obserwując efekty.

Pora zapoznać się z naszym kodem. Każdy element, w tym przypadku prostokąt, definiujemy jak w html z użyciem znacznika:
<rect />
Przeanalizujmy dodane do niego parametry:
x="50" y="20"
to definicja punktu(x,y), w którym zaczynamy rysowanie (spróbuj go zmienić!) W SVG obszar co coś na kształt układu współrzędnych. Współrzędne (0,0) ma lewy górny róg.
width="250" height="150"
to z kolei rozmiary naszego obiektu. Co ważne, rozmiary obiektów w SVG nie da się zdefiniować z poziomu CSS (albo atrybutu style) To jednak nie znaczy, że elementy SVG nie posiadają styli:
style="fill:yellow;stroke:red;stroke-width:12;"
mamy tu trzy atrybuty, których nie można użyć w przypadku klasycznyxch elementów html (DIV, SPAN itd.) "Fill" to coś na kształt "background-color" - definuje kolor wypełnienia obszaru.
"Stroke" to kolor obramowania (coś na kształ "border-color") zaś "stroke-width" to jego grubość. (odpowiednik klasycznego "border-width")

Chcesz dać mi znać że podoba Ci się treść strony i rozwijanie jej ma sens? Polub nas na FB!