Slider utworzony w pliku svg z wykorzystaniem JavaScript

Stronę tą wyświetlono już: 349 razy

Rys. 1
Przykładowy plik SVG robiący za slider-a.

Możliwe jest również osadzanie skryptów JavaScript wewnątrz samego pliku SVG. Przykładem takiego bardzo prostego zastosowania JavaScriptu może być slider, który zamieszczam poniżej. Kod osadzony wewnątrz pliku SVG wygląda następująco:

Listing 1
  1. <script type="text/javascript">
  2. var nr = 0;
  3. function s() {
  4. var images = document.getElementsByTagName("image");
  5. for(var i = 0; i < images.length; i++){
  6. images[i].style.display = 'none';
  7. }
  8. nr = (nr + 1) % images.length;
  9. images[nr].style.display = 'initial';
  10. }
  12. s();
  14. setInterval(s, 4000);
  15. </script>

Samo osadzenie pliku na stronie (tak, aby skrypt zawarty w nim się wykonywał) wygląda następująco:

Listing 2
  1. <embed src="rysunki/camera.svg" style="display: block; margin:auto" type="image/svg+xml" />

Komentarze