SVG hat ein sehr cooles und mächtiges Element namens . Das Konzept ist ziemlich einfach. Es findet ein weiteres Stück SVG-Code, auf das durch die ID verwiesen wird, und klont es innerhalb des Elements.
Der grundlegendste Anwendungsfall wäre: Ich habe diese Form (en) bereits einmal auf der Seite gezeichnet und möchte sie an einer anderen Stelle erneut zeichnen. Holen Sie sich diese Form (en) und zeichnen Sie sie erneut.
Wir können diese Fähigkeit als Root-Konzept für (Drumroll!) Und das gesamte Icon-System verwenden! Wir können alle Formen, die wir auf der Seite verwenden möchten, in einem großen SVG-Block verwenden. Wir werden sie alle in ein Tag einschließen, das eine semantische Art ist, zu sagen: "Wir definieren nur diese Dinge, die später verwendet werden sollen." Es stellt auch sicher, dass sie nicht gerendert werden (aber Sie sollten auch display: none;das selbst.
Es funktioniert so:
Dieses funky aussehende xlink:hrefAttribut verweist auf eine ID an anderer Stelle. Diese ID kann sich auf einem beliebigen Formelement wie einem oder oder auf einer Gruppe von Elementen wie einem befinden .
Das Beste ist, dass es sich bei einem Symbolsystem um ein Element handeln kann. Das Element ist nicht nur semantisch korrekt (ein Symbol ist ein Symbol, nein?), Sondern kann auch eigene viewBox-Attribut- und Eingabehilfeninformationen wie und Tags enthalten. Dies macht die Implementierung sehr einfach (wie oben gezeigt).
Sie müssen also nur sicherstellen, dass dies an einer anderen Stelle im Dokument definiert ist:
Basketball Siehe den Pen JoDmd von Chris Coyier (@chriscoyier) auf CodePen.