SVG Properties in CSS Guide

Schriftarteigenschaften

Texteigenschaften

Maskierungseigenschaften

Interaktivitätseigenschaften

Farbeigenschaften

Sichtbarkeitseigenschaften

Texteigenschaften

Clip-Eigenschaften

Maskierungseigenschaften

Filtereffekte

Verlaufseigenschaften

Interaktivitätseigenschaften

Farbeigenschaften

Maleigenschaften

Während Präsentationsattribute als CSS-Eigenschaften verwendet werden können, um SVG zu stylen, wie sieht es mit der Steuerung der Koordinaten und Dimensionen von SVG-Elementen mit CSS aus? SVG 2, das zum Zeitpunkt des Schreibens den Status Candidate Recommendation hat, ermöglicht das Styling und die Animation dieser Eigenschaften.

Die Spezifikation von SVG 2 besagt:

Einige Styling-Eigenschaften können nicht nur in Style-Sheets und 'style'-Attributen, sondern auch in Präsentationsattributen angegeben werden. Dies sind Attribute, deren Name einer bestimmten CSS-Eigenschaft entspricht (oder ähnlich ist) und deren Wert als Wert dieser Eigenschaft geparst wird."

Das bedeutet nicht nur, dass SVG-Eigenschaften mit CSS als Präsentationsattribute oder in Style-Sheets gestylt werden können, sondern dies kann auch auf CSS-Pseudo-Klassen wie :hover oder :active angewendet werden.

SVG 2 führt auch weitere Präsentationsattribute ein, die als Styling-Eigenschaften verwendet werden können. Diese Attribute finden Sie in der SVG 2 Spezifikation.

Es ist wichtig zu beachten, dass nicht jedes SVG-Element die gleichen CSS-Eigenschaften unterstützt. Ähnlich wie es CSS-Eigenschaften gibt, die auf bestimmte SVG-Elemente angewendet werden können, gibt es spezifische Eigenschaften, die von bestimmten SVG-Elementen unterstützt werden.

Zum Beispiel unterstützen die Elemente <circle> oder <ellipse> die Eigenschaften cx und cy als Mittelpunktkoordinaten der Form. Das Element unterstützt auch die Eigenschaften rx und ry als Radius, aber das Element kann diese Eigenschaften nicht verwenden.

Geometrieeigenschaften

In SVG 2 sind Eigenschaften wie rx und ry als Geometrieeigenschaften definiert. Geometrieeigenschaften können als CSS-Eigenschaften verwendet werden, genau wie Präsentationsattribute wie fill oder stroke-Eigenschaften. Diese CSS-Eigenschaften und die entsprechenden SVG-Elemente umfassen

SVG 2 ermöglicht auch die Positionierung von SVG-Elementen mit CSS. Beginnen wir mit dem Zeichnen einer Rechteckform mit dem folgenden SVG:

<svg width="170" height="170">
  <rect x="10" y="10" width="150" height="150" />
</svg>

Und dem folgenden CSS:

rect {
  fill: #6e40aa;
}

Dies erzeugt eine Rechteckform mit ihren Koordinaten auf 10, 10 gesetzt. Mit SVG 2 können x und y als CSS-Eigenschaften angewendet werden.

/* This will work with SVG 2 */
rect {
  x: 10;
  y: 10;
  ...
}

Der SVG-Code würde sich auf Folgendes reduzieren:

<svg width="170" height="170">
  <rect width="150" height="150" />
</svg>

Sie können sogar width und height für das <rect>-Element mit CSS wie folgt festlegen:

rect {
  ...
  width: 150px;
  height: 150px;
  ...
}

Das lässt uns mit nur Folgendem für die SVG-Markup:

<svg width="170" height="170">
  <rect />
</svg>

Zum Zeitpunkt des Schreibens funktionieren die folgenden Demos in Blink (z. B. Chrome und Opera) und WebKit (z. B. Safari) Browsern, da diese Browser SVG 2-Funktionen unterstützen. Bis dahin tauchen wir ein, wie man SVG-Eigenschaften mit CSS überschreibt.

Das Element kann mit CSS überschrieben werden, um Shape-Morphing zu erzeugen.

Die SVG-Pfade, die sich ineinander verwandeln, müssen dieselben Befehle und dieselbe Anzahl von Punkten haben, andernfalls funktioniert das Morphing nicht.

Beginnen wir mit dem Zeichnen eines Elements in Form eines Dreiecks. Die Verwendung der d-Eigenschaft gibt die Form des Elements an.

<svg height="220" width="300">
  <path d="M150 10 L40 200 L260 200Z" />
</svg>

Damit sich das Dreieck in eine andere Form verwandelt, überschreiben wir das SVG-Element mit der d-Eigenschaft durch CSS:

path {
  d: path("M150, 10 L40, 200 L260, 200Z");
  fill: #4c6edb;
}

Fügen wir auch eine :active-Pseudo-Klasse zur Eigenschaft hinzu, sodass sich die Form in ein Quadrat verwandelt und ihre fill-Farbe ändert, wenn auf das Element geklickt wird. Fügen wir außerdem eine transition-Eigenschaft hinzu, um die Shape-Morphing-Aktion flüssig erscheinen zu lassen. Hier ist das CSS:

path:active {
  d: path("M150, 10 L40, 200 L260, 200 L260, 200Z");
  fill: #4c6edb;
  transition: all 0.35s ease;
}

Und das SVG wäre:

<svg height="220" width="300">
  <path />
</svg>

Möchten Sie eine weitere Demo? Hier ist eine coole Demo von Chris Coyier, die SVG-Shape-Morphing beim Hovern zeigt!

SVG-Eigenschaften können mit CSS durch CSS-Animationen und -Übergänge animiert werden.

In dieser Demo zeichnen wir verschiedene SVG-Elemente und erstellen eine Wellenanimation. Beginnen wir mit dem Zeichnen von fünf Elementen:

<svg width="350" height="250">
  <circle class="shape" />
  <circle class="shape" />
  <circle class="shape" />
  <circle class="shape" />
  <circle class="shape" />
</svg>

Wir verwenden CSS-Variablen und die :nth-child() CSS-Pseudo-Klasse, um jede .shape-Klasse zu definieren. Die .shape-Klasse hat einen cy von 50 und einen r von 20. Jede der .shape-Klassen hat ihre eigenen cx und fill CSS-Eigenschaften gesetzt.

:root {
  --color-1: #6e40aa;
  --color-2: #4c6edb;
  --color-3: #24aad8;
  --color-4: #1ac7c2;
  --color-5: #1ddea3;
}

.shape {
  cy: 50;
  r: 20;
}

.shape:nth-child(1) {
  cx: 60;
  fill: var(--color-1);
}

.shape:nth-child(2) {
  cx: 120;
  fill: var(--color-2);
}

.shape:nth-child(3) {
  cx: 180;
  fill: var(--color-3);
}

.shape:nth-child(4) {
  cx: 240;
  fill: var(--color-4);
}

.shape:nth-child(5) {
  cx: 300;
  fill: var(--color-5);
}

So sollte es bisher aussehen.

Jetzt ist es Zeit zu animieren! Beginnen wir mit der Verwendung der @keyframes-Regel, um die moveCircle-Animation zu definieren:

@keyframes moveCircle {
  50% {
    cy: 150;
    r: 13;
  }
}

Dadurch wird jedes Element dazu gebracht, seine cy-Koordinaten von 50 auf 150 und r von 20 auf 13 zu ändern. Fügen Sie der .shape-Klasse das Folgende hinzu, um die Animation unendlich laufen zu lassen:

.shape {
  ...
  animation: moveCircle 1250ms ease-in-out both infinite;
}

Fügen Sie schließlich eine animation-delay zu jeder der .shape-Klassen zum CSS hinzu, mit Ausnahme von .shape:nth-child(1), wie folgt:

.shape:nth-child(2) {
  ...
  animation-delay: 100ms;
}

.shape:nth-child(3) {
  ...
  animation-delay: 200ms;
}

.shape:nth-child(4) {
  ...
  animation-delay: 300ms;
}

.shape:nth-child(5) {
  ...
  animation-delay: 400ms;
}

Formen in SVG <pattern>-Elementen können ebenfalls mit CSS animiert werden. Hier ist eine coole Demo von Dudley Storey, die das zeigt!