Animate SVG -Pfadänderungen in CSS

SVGs<path></path> Elemente bieten leistungsstarke Zeichenfunktionen, und ich versuche gelegentlich, sie zu verwenden, um einige Formen zu zeichnen. Obwohl ich das Fell nur über seine volle Funktionalität kenne, reicht es mir aus, einige interessante Animationseffekte auszuprobieren. Alle linearen Syntaxbefehle (wie L ) sind sehr einfach und leicht zu verstehen, während der Curve -Befehl Q auch ziemlich intuitiv ist. Wenn Sie die Zeichnung auf viewBox="0 0 100 100" beschränken, scheint es nicht schwierig zu sein, ein einfaches Diagramm zu zeichnen.

Hier ist ein klassisches Beispiel, das Grafiken unter Verwendung aller grundlegenden Befehle und Animationen unter Verwendung von CSS (nur Chromiumbrowser) zeichnet:

Es scheint seltsam, aber real:

<svg viewbox="0 0 10 10"><path d="M2,2 L8,8"></path></svg>

 SVG: Hover Path {
  Übergang: 0,2s;
  D: Path ("M8,2 L2,8");
}

Vor kurzem brauche ich ein UI -Element, dessen Symbole je nach Staat variieren werden. Es ist wie eine "Protokoll" -Form, der Standardzustand ist gerade, ein wenig wie ein Hamburger -Menü (nur vier Zeilen, eher wie eine Textlinie) und dann verschiedene andere Zustände.

1. Standard (Standard)
2. Aktivitäten (aktiv)
3. Erfolg (Erfolg)
4. FEHLER

Zuerst schrieb ich eine sehr komplexe endliche Staatsmaschine:

 const indicator = document.querySelector (". Element");

curr CurrentState = Indicator.Dataset.State;

Anzeige.AdDeVentListener ("Click", () => {
  let Nextstate = "";

  if (currentState == "Standard") {
    NextState = "Active";
  } else if (currentState == "active") {
    NextState = "Erfolg";
  } else if (currentState == "Erfolg") {
    NextState = "ERROR";
  } anders {
    NextState = "Standard";
  }

  Anzeige.Dataset.State = NextState;
  CurrentState = NextState;
});

Dadurch wird die Tür geöffnet, um Stile mithilfe des Datenattributs festzulegen:

 .Element {
  & [data-state = "default"] {
  }
  & [data-state = "active"] {
  }
  & [data-state = "success"] {
  }
  & [data-state = "error"] {
  }
}

Also, wenn mein Element mit dem Standardzustand von vier Zeilen beginnt:

<div data-state="DEFAULT">
  <svg viewbox="0 0 100 100"><path d="M0, 20 Q50, 20 100, 20"></path><path d="M0, 40 Q50, 40 100, 40"></path><path d="M0, 60 Q50, 60 100, 60"></path><path d="M0, 80 Q50, 80 100, 80"></path></svg>
</div>

... Ich kann den Weg in andere Zustände in CSS ändern. Zum Beispiel kann ich diese vier geraden Linien mit CSS ändern.

Beachten Sie, dass diese vier "Linien" bequem ungenutzte Kurvenpunkte enthalten. Nur Pfade mit derselben Anzahl und Art von Punkten können in CSS Animation sein. Das Hinzufügen von Kurvenpunkten eröffnet mehr Möglichkeiten.

Diese vier neuen Pfade zeichnen tatsächlich Formen ähnlich wie Kreise!

 .Editor-Indicator {
  & [data-state = "active"] {
    .icon {
      : n-Kind (1) {
        D: Pfad ("M50, 0 Q95, 5 100,50");
      }
      : n-Kind (2) {
        D: Pfad ("M100, 50 Q95, 95 50,100");
      }
      : n-Kind (3) {
        D: Pfad ("M50,100 Q5, 95 0, 50");
      }
      : n-Kind (4) {
        D: Pfad ("M0, 50 Q5, 5 50, 0");
      }
    }
  }
}

Für andere Zustände zeichne ich eine grobe Zecke (weist auf den Erfolg hin) und eine grobe Ausrufezeichen (weist auf, das Misserfolg anzeigt).

Demo (nur Chrom -Browser), können Sie darauf klicken, um den Status zu ändern: (Der Demo -Link oder Code sollte hier eingefügt werden. Da ich jedoch keinen dynamischen Inhalt erstellen kann, nur Beschreibung)

Da Firefox und Safari in d: path() nicht unterstützen, verwendete ich es nicht. Es ist nicht so, dass es nicht animieren kann, es funktioniert einfach nicht, also steht es mir nicht zur Verfügung. Am Ende habe ich das Symbol in einem anderen Zustand ersetzt.

Wenn Sie eine Formverformung über Browser benötigen, haben wir einen vollständigen Artikel dazu. (Der Artikel -Link sollte hier eingefügt werden, aber da ich den Link nicht bereitstellen kann, kann ich ihn nur beschreiben.)

Das obige ist der detaillierte Inhalt vonAnimate SVG -Pfadänderungen in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!