Orqestria Letöltés
← Weboldal építők adatlapja

Skill · 1.0.0 verzió

SVG-animáció

Helyes koordinátával, egyedi azonosítóval és csökkentett mozgású alternatívával készít skálázható SVG-mozgást.

svg-animation

Ezt a skillt használó csapattagok

Nézd meg, miben segít

Mikor hasznos?

Akkor használd, ha animált ikonok összeakadnak vagy hibásan méreteződnek.

Miben segít neked?

  • Meghatározza a nézet geometriáját és következetes transzformációs origót.
  • Megelőzi az ismételt azonosítót színátmenetben, maszkban és kivágásban.
  • Megfelelő animációs technikát választ, méri a megjelenítési költséget.

Például ezt kérheted

Animálj két állapotillusztrációt maszkkonfliktus nélkül, értelmes statikus alternatívával. Egy oldalon legyen mindkét illusztráció; egyiket állítsd meg, másikat méretezd. Maszkjuk és animációjuk maradjon független, érthető statikus állapotszöveggel.

Részletes dokumentáció

Itt a skill eredeti útmutatóját, példáit és ellenőrzési szempontjait olvashatod az eredeti nyelven.

Részletek…Összecsukás

SVG Animation

SVGs provide resolution-independent, DOM-addressable vector graphics that bridge UI components and expressive illustrations. Well-structured SVG markup is 80% of a reliable SVG animation.

Preparing Clean, Animatable SVG Markup

  1. Viewport & coordinate hygiene:
    • Always include an explicit viewBox="0 0 width height" and preserve aspect ratio (preserveAspectRatio="xMidYMid meet").
    • Group related visual layers into semantic <g id="..."> or data-part="..." groups flattened to a shared coordinate space so transforms don't compound unexpectedly across deeply nested matrices.
  2. Avoid ID collisions across multiple component instances:
    • Inline SVGs often contain <linearGradient id="grad-1">, <clipPath id="clip-1">, or <mask id="mask-1">. Rendering the same component twice on a page causes duplicate DOM IDs—and hiding the first instance breaks gradients/clips in the second! Prefix IDs dynamically per component instance (useId()).
  3. Transform origin normalization:
    • By default, SVG <path> and <g> elements calculate transform-origin relative to the entire SVG canvas (0, 0), not the element's own bounding box.
    • In CSS, always set transform-box: fill-box; transform-origin: center; on animated SVG child elements (or use GSAP's svgOrigin / transformOrigin: "50% 50%", which normalizes cross-browser behavior automatically).

Core SVG Animation Techniques

Technique Best Practice
Line / Path Drawing (stroke-dasharray & stroke-dashoffset) Set pathLength="1" directly on the <path>, <line>, or <circle> element! That normalizes the total path length to 1 regardless of viewport scale, allowing clean stroke-dasharray: 1; stroke-dashoffset: 1 -> 0 animations without calling getTotalLength() in JavaScript.
Data-Flow Connectors & Pulses Layer two paths sharing the exact same d attribute: a muted base track (stroke-opacity="0.2") and an animated highlight segment (pathLength="1", stroke-dasharray="0.12 0.88", animating stroke-dashoffset from 1 to 0) to visualize live request/data routing.
Icon Micro-Interactions (Morph & State Toggle) Keep anchor point counts compatible when morphing d attributes, or animate composite <line> / <path> primitives (rotate, scaleX, stroke-dashoffset) for crisp play/pause, menu/close, and copy/check transitions.
Clipping & Mask Reveals Prefer <clipPath> (hard geometry edge, fast GPU compositing) over <mask> (luminance/alpha pixel calculation per frame) unless soft feathered gradients are required.

Accessibility & Performance Guardrails

  • Decorative vs. informative SVGs: Mark purely decorative icons and background vector scenes with aria-hidden="true" focusable="false". For informative diagrams, include <title> and <desc> linked via aria-labelledby or expose semantic HTML labels alongside the graphic.
  • Avoid animating SVG <filter> primitives (feGaussianBlur, feDisplacementMap) continuously on large viewports: Filter regions trigger expensive CPU/GPU rasterization every frame. Restrict animated filters to small bounded <filter x y width height> regions or replace them with layered opacity/transform transitions.

Csomagban lévő fájlok 1

  • SKILL.md