Kwalifikacje w Zawodzie - Testy zawodowe online | Egzaminy Zawodowe

KWALIFIKACJA AUD5 - TEST WIEDZY NR 5



PYTANIE NR 27.
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
Za pomocą powyższego fragmentu kodu SVG stworzono prostą grafikę wektorową. Który z poniższych elementów jest animowany, gdy dodasz do niego atrybut animateTransform?
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
animateTransform służy do animowania transformacji (np. obrotu, skali, przesunięcia) zastosowanej do elementu SVG, czyli zmienia jego położenie/orientację/rozmiar w czasie. Nie animuje bezpośrednio koloru wypełnienia ani obramowania (to robi się przez animację atrybutów typu fill lub stroke).

Pełne wyjaśnienie:

Atrybut i element animacyjny animateTransform w SVG jest przeznaczony do animowania transformacji obiektu, czyli zmian opisanych transformacjami takimi jak: przesunięcie (translate), obrót (rotate), skala (scale) czy pochylenie (skew). W praktyce oznacza to, że animowany jest "sposób przekształcania" elementu <circle> w czasie, a więc jego położenie, orientacja lub rozmiar wynikające z transformacji.

Dlatego poprawna jest odpowiedź: "Transformacja koła" — bo właśnie transformację przypisaną do koła można animować przez animateTransform.

  • "Kształt koła" jest mylące: samo koło jako prymityw SVG pozostaje kołem; animateTransform nie "zmienia typu" obiektu. Owszem, po przekształceniu (np. skali niesymetrycznej) wizualnie może wyglądać inaczej, ale mechanizm nadal animuje transformację, a nie atrybut definicji kształtu.
  • "Kolor wypełnienia koła" nie jest animowany przez animateTransform. Do animacji koloru stosuje się animację atrybutu fill (np. przez element animate), a nie animację transformacji.
  • "Kolor obramowania koła" analogicznie dotyczy atrybutu stroke. Zmiana stroke w czasie to animacja atrybutu/stylu, a nie transformacji geometrycznej.

Wskazówka egzaminacyjna: jeśli w nazwie narzędzia/atrybutu jest "Transform", to prawie zawsze chodzi o ruch/obrót/skalę obiektu, a nie o jego kolor czy grubość linii. Najpierw rozdziel w głowie: (1) geometria/transformacje, (2) wygląd/styl.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Co animuje animateTransform w grafice SVG?
animateTransform animuje transformację elementu SVG, czyli np. jego obrót, skalowanie albo przesunięcie w czasie. Nie służy do zmiany koloru ani grubości obrysu — to animuje się przez atrybuty typu fill lub stroke.
Jakie transformacje można animować w SVG?
Najczęściej animuje się translate (ruch), rotate (obrót), scale (zmiana rozmiaru) oraz skewX/skewY (pochylenie). Mechanizm dotyczy geometrii i położenia obiektu, więc jest bardzo użyteczny w ikonach, infografikach i animacjach webowych.
Dlaczego animateTransform nie zmienia koloru fill?
Bo fill to atrybut wyglądu (stylu), a transformacja to przekształcenie geometryczne. animateTransform działa tylko na transformacje. Jeśli chcesz animować kolor, używasz animacji atrybutu (np. elementu animate) ustawionej na fill lub stroke.
Jak animować kolor obrysu stroke w SVG?
Kolor obrysu animuje się przez animowanie atrybutu stroke, a nie transformacji. W praktyce dodaje się animację atrybutu, która zmienia wartości koloru w czasie. To inna kategoria animacji niż obrót czy przesunięcie, które realizuje animateTransform.
Co oznaczają cx, cy i r w elemencie <circle>?
W <circle>: cx i cy określają współrzędne środka okręgu, a r jego promień. Te parametry opisują geometrię koła. Można je zmieniać, ale animateTransform nie jest do tego "pierwszym wyborem" — on animuje transformację całego elementu.
Kiedy lepiej użyć animateTransform zamiast animacji atrybutów?
Gdy zależy Ci na ruchu lub przekształceniu całego obiektu: obrót ikony, "pulsowanie" (skala), przesuwanie elementu po ekranie. Animacja atrybutów (np. fill, stroke-width) jest lepsza, gdy chcesz zmieniać wygląd, a nie położenie czy orientację.
Jakie błędy najczęściej robią uczniowie przy animateTransform?
Częsty błąd to mylenie transformacji z wyglądem: wybieranie odpowiedzi o kolorze, bo jest "widoczny". Drugi błąd to traktowanie "kształtu" jako czegoś, co animuje animateTransform. Warto zapamiętać: transformacje = geometria/ruch; styl = fill/stroke/stroke-width.
Czy animateTransform działa na każdy element SVG?
Zasadniczo działa na elementy, do których można zastosować transformacje (w praktyce większość elementów graficznych, np. <circle>, <rect>, <path>). Warunkiem jest sensowne zdefiniowanie transformacji do animacji (np. obrót wokół punktu). Szczegóły zależą od implementacji przeglądarki.
Jak odróżnić animację transformacji od animacji stylu w zadaniu egzaminacyjnym?
Spójrz na to, co się zmienia: jeśli obiekt się przesuwa/obraca/zmienia rozmiar, to transformacja. Jeśli zmienia kolor, przezroczystość, grubość obrysu lub wzór wypełnienia — to styl/atrybuty prezentacyjne. W pytaniach z nazwą Transform zwykle chodzi o geometrię.
Jak przygotować się do pytań o animacje SVG na egzaminie?
Przećwicz 3 typowe przypadki: obrót (rotate), ruch (translate) i pulsowanie (scale) oraz osobno animację koloru (fill/stroke). W notatkach miej krótką mapę: "transformacje" vs "styl". To ułatwia szybkie decyzje w testach.
info

Około 46% zdających odpowiada poprawnie na to pytanie. trudne

Według specjalistów z branży: "animateTransform służy do animowania transformacji (np. obrotu, skali, przesunięcia) zastosowanej do elementu SVG, czyli zmienia jego położenie/orientację/rozmiar w czasie."

Źródła:

  • MDN Web Docs: "&lt;animateTransform&gt;" (SVG) — opis zastosowania i atrybutów, https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateTransform (dostęp: 2026-03-01)
  • W3C: SVG 1.1 (Second Edition) — rozdział o animacji i elemencie animateTransform, https://www.w3.org/TR/SVG11/animate.html#AnimateTransformElement (dostęp: 2026-03-01)
  • W3C: SVG 2 — definicje związane z animacją i transformacjami (sekcje dot. animacji/SMIL i transform), https://www.w3.org/TR/svg2/ (dostęp: 2026-03-01)

Materiały:

  • Dokumentacja SVG i przykłady animacji transformacji (SMIL) na stronach W3C/MDN
  • Ćwiczenia: animacja obrotu i skali obiektu &lt;circle&gt; z użyciem animateTransform
  • Porównanie: animateTransform vs animowanie fill/stroke (element &lt;animate&gt;)
Zobacz też:

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego