SVG i Java Script (przykład)

Za pomocą SVG można tworzyć dowolną, statyczną grafikę. Jednak to, co wyróżnia tę technikę jeszcze bardziej i czyni ją realnym następcą Flasha, to możliwość obsługi zdarzeń i wchodzenia w intereakcję czyli po prostu współpraca z technologią JavaScript.

Jeżeli nie znasz języka JS - trudno, choć jeśli zajmujesz się/planujesz zajmować tworzeniem stron internetowych, musisz jak najprędzej nadrobić te braki. Poniższy przykład jest na tyle prosty, że nawet elementarna znajomość programowania powinna wystarczyć do zrozumienia.
W przykładzie korzystamy z bardzo powszechnej biblioteki jQuery, w jej najnowszej wersji.
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
A oto i przykład:

Ruszaj myszką po tęczy, by zmieniać jej kolor! Tylko od Ciebie zależy, jakie przybierze barwy. ;-)

Kod SVG dla tego przykładu prezentuje się następująco - jeśli sumiennie przerobiłeś/aś poprzednie strony, z pewnością niczym Cię nie zaskoczy:
<svg width="1000" height="700"> <path d="M0,640 S500,-400 1000,640 " style="fill: none; stroke: red; stroke-width: 12" /> <path d="M0,620 S500,-400 1000,620 " style="fill: none; stroke: red; stroke-width: 12" /> <path d="M0,600 S500,-400 1000,600 " style="fill: none; stroke: red; stroke-width: 12" /> <path d="M0,580 S500,-400 1000,580 " style="fill: none; stroke: red; stroke-width: 12" /> <path d="M0,560 S500,-400 1000,560 " style="fill: none; stroke: red; stroke-width: 12" /> <path d="M0,540 S500,-400 1000,540 " style="fill: none; stroke: red; stroke-width: 12" /> <path d="M0,520 S500,-400 1000,520 " style="fill: none; stroke: red; stroke-width: 12" /> <path d="M0,500 S500,-400 1000,500 " style="fill: none; stroke: red; stroke-width: 12" /> <path d="M0,480 S500,-400 1000,480 " style="fill: none; stroke: red; stroke-width: 12" /> <path d="M0,460 S500,-400 1000,460 " style="fill: none; stroke: red; stroke-width: 12" /> <path d="M0,440 S500,-400 1000,440 " style="fill: none; stroke: red; stroke-width: 12" /> <path d="M0,420 S500,-400 1000,420 " style="fill: none; stroke: red; stroke-width: 12" /> <path d="M0,400 S500,-400 1000,400 " style="fill: none; stroke: red; stroke-width: 12" /> <path d="M0,380 S500,-400 1000,380 " style="fill: none; stroke: red; stroke-width: 12" /> <path d="M0,360 S500,-400 1000,360 " style="fill: none; stroke: red; stroke-width: 12" /> </svg>
Więcej uwagi poświęcimy kodowi JavaScript. W całości, prezentuje się on następująco:
function los(poczatek, koniec) { var roznica = koniec-poczatek; return Math.random() * roznica + poczatek; } $(document).ready(function() { $('path').mouseenter(function() { var kolor = 'rgb(' + parseInt(los(0,255)) + ',' + parseInt(los(0,255)) + ',' + parseInt(los(0,255)) + ')'; $(this).css('stroke', kolor); }); $('path').each(function() { $(this).mouseenter(); }); });
Funkcja los pobiera dwa argumenty i generuje losową liczbę w przedziale od "poczatek" do "koniec" - kolory tęczy są losowe, tak więc taka funkcja jest nam niezbędna. Fragment:
$('path').mouseenter(function() { ... })
oznacza funkcję wywoływaną po najechaniu na dowolny element "path". (w naszym przykładzie za pomocą tego znacznika zdefiniowaliśmy wyłącznie pasma naszej tęczy)
var kolor = 'rgb(' + parseInt(los(0,255)) + ',' + parseInt(los(0,255)) + ',' + parseInt(los(0,255)) + ')';
Ta linia powoduje utworzenie zmiennej lokalnej (tylko dla jednego wywołania funkcji) tworzącej losowy kolor w formacie nam już znanym - rgb(r,g,b). Liczba zwracana przez funkcję los jest zmiennoprzecinkowa, tak więc musimy ją jeszcze przekonwertować na liczbę całkowitą - stąd funkcja parseInt.
$(this).css('stroke', kolor);
Komenda zmieniająca atrybut styli (w tym przypadku konturu) na wartość zmiennej "kolor".

Jako że domyślnie kolory naszych linii są zdefiniowane jako czerwone, musimy za pierwszym załadowaniem pokolrować je na losowe barwy - tak, jakby na każdą najechać myszką. Stąd komenda:
$('path').each(function() { $(this).mouseenter(); })
na każdym elemencie "path" jest wywoływane zdarzenie "mouseenter" - najechanie myszką. A to, co powinno się przy takim najechaniu stać, już opisaliśmy.
To proste!

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