Skalierbare Vektorgrafiken (SVG) mit CSS gestalten
Heute werden wir unsere Diskussion über Scalable Vector Graphic (SVG) fortsetzen, und wie wir in unserem vorherigen Beitrag bereits erwähnt haben, besteht einer der Vorteile der Verwendung von SVG darin, dass es mit CSS gestaltet werden kann.
SVG-Styling-Eigenschaften
Die Gestaltung von SVG-Dateien funktioniert grundsätzlich genauso wie bei normalen HTML-Elementen, sie haben jedoch auch einige gemeinsame Eigenschaften. Es gibt jedoch andere Eigenschaften, die speziell für SVG-Objekte vorgesehen sind und neben CSS eine eigene Spezifikation haben.
Zum Beispiel, In normalen HTML-Elementen können Sie die Hintergrundfarbe entweder mit hinzufügen Hintergrundfarbe oder Hintergrund CSS-Eigenschaft In SVG ist es ein bisschen anders; Die Hintergrundfarbe wird mit angegeben füllen stattdessen Eigentum. Außerdem wird der Rahmen des Elements mit angegeben Schlaganfall Eigentum und ist nicht bei der Rand Wie in normalem HTML können Sie hier die vollständige Liste sehen.
Wenn Sie lange mit dem Vektoreditor wie Adobe Illustrator gearbeitet haben, können Sie schnell vermuten, dass der Mechanismus zur Benennung von Eigenschaften in SVG vom Editor stammt.
SVG-Style-Implementierung
Das SVG-Element kann auf eine der folgenden Arten gestaltet werden.
Präsentationsattribute
Wenn Sie alle SVG-Eigenschaftslisten gesehen haben, können sie alle direkt im Element hinzugefügt werden, um die Darstellung des Elements zu ändern. Das folgende Beispiel zeigt, wie wir hinzufügen können füllen und Schlaganfall Eigentum direkt an einem Rect Element;
Das Rechteck wird wie der Screenshot unten aussehen.
Inline-Stylesheet
Wir können mit dem auch Stil hinzufügen Stil Attribut. Im folgenden Beispiel werden wir auch hinzufügen füllen und Schlaganfall zum Rect, aber diesmal fügen wir es in die Stil und drehen Sie es mit CSS3 verwandeln Eigentum wie so;.
Das Rechteck wird dasselbe Ergebnis anzeigen, nur dass es jetzt auch gedreht wird;
Internes Stylesheet
Betten Sie den SVG-Stil in die Stil element ist auch möglich und unterscheidet sich nicht von dem, was wir mit regulärem HTML gemacht haben. Das folgende Beispiel zeigt, wie wir interne Stile hinzufügen, um SVG-Elemente in zu beeinflussen .html dokumentieren.
SVG ist jedoch eine XML-basierte Sprache. Wenn Sie also gerade Inline-Stylesheets in ein .svg Dokument, müssen wir die Stildeklaration einfügen cdata, wie folgt;
Das cdata hier ist erforderlich, da CSS haben kann > Zeichen, das mit XML-Parsern in Konflikt steht. Verwenden cdata wird dringend empfohlen, um den Stil in SVG einzubetten, auch wenn der Konfliktzeichen nicht im Stylesheet angegeben ist.
Externes Stylesheet
Das externe Stylesheet funktioniert auch für SVG-Elemente in .html dokumentieren.
Wieder in .svg Dokument, müssen wir das externe Stylesheet als XML-Stylesheet, wie so.
Gruppieren von Elementen
SVG-Elemente können mit gruppiert werden
Sowohl das Rechteck als auch der Kreis haben das gleiche Ergebnis.
Letzter Gedanke
Wir haben alle wichtigen Aspekte zum Styling von SVG mit CSS durchlaufen. Dies ist nur einer der Vorteile, wenn Sie Grafik mit SVG bereitstellen. Im nächsten Post werfen wir einen Blick auf einen weiteren, also bleiben Sie dran.
- Demo anzeigen
- Quelle herunterladen
