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!