SVG -Eigenschaften im CSS -Leitfaden

In diesem Leitfaden wird der Schnittpunkt von CSS und skalierbaren Vektorgrafiken (SVG) untersucht und sich auf das Styling von SVG -Elementen unter Verwendung von CSS -Eigenschaften konzentrieren. Während zahlreiche SVG -Attribute existieren, können nur bestimmte - vor allem Präsentationsattribute - direkt mit CSS gestaltet werden. Einige CSS-Eigenschaften werden mit SVG (z. B. font-size und opacity ) geteilt, während andere SVG-spezifisch sind.

Um beispielsweise ein Element rot zu färben, funktioniert die fill -Eigenschaft in CSS, da fill ein Präsentationsattribut ist:

 Kreis {
  Füllung: Rot;
}

Diese Anleitung finden Sie umfassend verfügbare SVG -Elemente und deren entsprechende CSS -Eigenschaften, die verschiedene Styling -Techniken wie allgemeine Stile und Animationen abdecken.

SVG -Elemente und CSS -Eigenschaften: Ein kategorisierter Überblick

Die folgenden Darstellungsattribute, die als CSS -Eigenschaften verwendet werden können, kategorisiert für Klarheit. Veraltete Elemente sind ausgeschlossen.

CSS und SVG Shared Properties

Schriftart Eigenschaften

Texteigenschaften

Maskierungseigenschaften

Interaktivitätseigenschaften

Farbeigenschaften

Sichtbarkeitseigenschaften

SVG-spezifische CSS-Eigenschaften

Texteigenschaften

Clipeigenschaften

Maskierungseigenschaften

Filtereffekte

Gradienteneigenschaften

Interaktivitätseigenschaften

Farbeigenschaften

Maleneigenschaften

SVG 2 und CSS -Styling

Während die Präsentation die Lücke zwischen CSS und SVG -Styling bricht, verbessert SVG 2 (derzeit in der Empfehlung von Kandidaten) diese Interaktion erheblich und ermöglicht die Kontrolle über Elementkoordinaten und -abmessungen mithilfe von CSS.

Die SVG 2 -Spezifikation verdeutlicht:

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

Dies bedeutet, dass CSS, einschließlich Pseudoklassen wie :hover und :active , SVG-Eigenschaften durch Präsentationsattribute oder Stylesheets stylen können. SVG 2 führt auch zusätzliche Präsentationsattribute für das Styling ein. Eine vollständige Liste finden Sie in der SVG 2 -Spezifikation.

Elementspezifische Eigenschaftsunterstützung

Es ist wichtig, sich daran zu erinnern, dass die CSS -Eigenschaftsunterstützung zwischen SVG -Elementen unterschiedlich ist. Bestimmte Eigenschaften sind elementspezifisch. Zum Beispiel,<circle></circle> Und<ellipse></ellipse> Unterstützen Sie cx , cy , rx und ry , aber andere Elemente könnten nicht.

Geometrieeigenschaften

SVG 2 definiert Eigenschaften wie rx und ry als Geometrieeigenschaften, die mit CSS sowie Präsentationsattributen wie fill oder stroke stilbar sind.

Positionierung von SVG -Elementen mit CSS (SVG 2)

SVG 2 ermöglicht eine CSS-basierte Positionierung. Betrachten Sie ein Rechteck:

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

Mit SVG 2 können die x und y -Attribute über CSS gesteuert werden:

 / * Funktioniert mit SVG 2 */
rect {
  x: 10;
  Y: 10;
  / * ... andere Stile ... */
}

Vereinfachung des SVG -Markups zu:

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

In ähnlicher Weise können width und height mit CSS eingestellt werden, wodurch der SVG -Code weiter minimiert wird.

Derzeit bieten Blink (Chrome, Opera) und Webkit (SAFARI) -Browser eine bessere Unterstützung für diese SVG 2 -Funktionen. Für eine breitere Kompatibilität sind alternative Techniken erforderlich.

SVG -Form, die sich mit CSS verwandeln

CSS können verwendet werden, um Form -Morphing -Effekte zu erzeugen. Die beteiligten SVG -Pfade müssen identische Befehle und die gleiche Anzahl von Punkten für ein erfolgreiches Morphing haben.

Beispiel: Morpieren Sie ein Dreieck in ein Quadrat.

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

CSS, um den Pfad zu überschreiben:

 Weg {
  D: Pfad ("M150, 10 L40, 200 L260, 200Z"); / * Anfangsform */
  FILL: #4C6EDB;
}

Pfad: aktiv {
  D: Pfad ("M10,10 L160,10 L160,160 L10, 160 Z"); / * Verwandelte Form */
  FILL: #4C6EDB;
  Übergang: Alle 0,35s erleichtern;
}

Das SVG -Markup vereinfacht:

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

SVG -Eigenschaften mit CSS animieren

CSS -Animationen und Übergänge animieren SVG -Eigenschaften. Dieses Beispiel zeigt eine Wellenanimation mit fünf Kreisen:

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

CSS mit Variablen und :nth-child() für Styling und Animation:

 / * ... CSS für Farben und anfängliche Kreisstile ... */

.Form {
  / * ... Anfangsstile ... */
  Animation: MoveCircle 1250ms, die beide unendlich entlarven;
}

/ * ... Animation-Zelay für jeden Kreis ... */

@keyframes meptecircle {
  50% {
    Cy: 150;
    R: 13;
  }
}

Animationen innerhalb<pattern></pattern> Elemente sind ebenfalls möglich.

Abschluss

Während SVG 2 leistungsstarke CSS -Styling -Funktionen bietet, entwickelt sich die weit verbreitete Browserunterstützung noch. Betrachten Sie die Kompatibilität für die Produktion sorgfältig. Wenn SVG 2 reift, wird das CSS -Styling von SVG -Geometrieeigenschaften immer robuster und zuverlässig.

Das obige ist der detaillierte Inhalt vonSVG -Eigenschaften im CSS -Leitfaden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!