SVG/Skrypty

SVG umożliwia tworzenie animacji i interaktywnych grafik. Istnieje kilka sposobów tworzenia animacji w SVG, w tym za pomocą CSS, JavaScript i SMIL.

Korzystanie z CSS: Możesz używać CSS do animowania elementów SVG, tak jak w przypadku HTML. Animacje CSS używają klatek kluczowych do zdefiniowania animacji i można je zastosować do elementów SVG za pomocą selektorów CSS. Oto przykład:

<svg>
  <rect x="50" y="50" width="50" height="50" fill="blue">
    <animate attributeName="x" from="50" to="200" dur="1s" fill="freeze" />
  </rect>
</svg>

W tym przykładzie stworzyliśmy prostokąt i dodaliśmy do niego element animowany. Atrybut attributeName określa atrybut animacji (w tym przypadku x), a atrybuty from i to określają wartość początkową i końcową animacji. Atrybut dur określa czas trwania animacji w sekundach, a atrybut fill określa, co zrobić z animacją po jej zakończeniu (w tym przypadku zamrażamy ją w miejscu).

Używanie JavaScript: Możesz także używać JavaScript do tworzenia animacji w SVG. Daje to większą kontrolę nad animacją i umożliwia tworzenie bardziej złożonych animacji. Oto przykład:

<svg>
  <rect id="myRect" x="50" y="50" width="50" height="50" fill="blue" />
</svg>

<script>
  const myRect = document.getElementById("myRect");
  myRect.animate(
    [{x: "50"}, {x: "200"}],
    {duration: 1000, fill: "forwards"}
  );
</script>

W tym przykładzie utworzyliśmy prostokąt i przypisaliśmy mu identyfikator. Następnie używamy JavaScript, aby wybrać element i stworzyć animację przy użyciu metody animate. Przekazujemy tablicę klatek kluczowych do metody animate, gdzie każda klatka kluczowa jest obiektem z właściwościami do animacji (w tym przypadku x) i wartością docelową. Przekazujemy również obiekt opcji z czasem trwania animacji i właściwością fill ustawioną na „forward”, aby prostokąt pozostał w końcowej pozycji po zakończeniu animacji.

Interakcja SVG z JavaScript i CSS:

SVG może wchodzić w interakcje z JavaScript i CSS, tworząc dynamiczną i interaktywną grafikę. Możesz używać JavaScript do manipulowania elementami i atrybutami SVG oraz CSS do stylizowania i animowania elementów SVG.

Oto kilka sposobów interakcji z SVG za pomocą JavaScript i CSS:

Manipulowanie SVG za pomocą JavaScript: Możesz używać JavaScript do wybierania i manipulowania elementami i atrybutami SVG. Na przykład możesz zmienić położenie, rozmiar, kolor lub kształt elementu SVG na podstawie danych wprowadzonych przez użytkownika lub innych zdarzeń. Oto przykład:

<svg>
  <circle id="myCircle" cx="50" cy="50" r="50" fill="blue" />
</svg>

<script>
  const myCircle = document.getElementById("myCircle");
  myCircle.addEventListener("click", () => {
    myCircle.setAttribute("fill", "red");
  });
</script>

W tym przykładzie utworzyliśmy krąg i przypisaliśmy mu identyfikator. Następnie używamy JavaScript, aby wybrać element i dodać do niego detektor zdarzeń kliknięcia. Gdy użytkownik kliknie kółko, wywoływana jest metoda setAttribute w celu zmiany koloru wypełnienia koła na czerwony.

Stylizowanie SVG za pomocą CSS: Możesz używać CSS do stylizowania elementów SVG, tak jak w przypadku elementów HTML. CSS może być użyty do ustawienia koloru, rozmiaru, czcionki, animacji