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!