d-Eigenschaft

Der Wert ist entweder eine path()-Funktion mit einem einzelnen <string>-Parameter oder das Schlüsselwort none.

none

Kein Pfad wird gezeichnet.

path(<string>)

Eine path()-Funktion mit einem quoted Datensatz-Parameter. Der Datensatz definiert einen SVG-Pfad. Der SVG-Pfaddaten-String enthält Pfadbefehle, die implizit Pixel-Einheiten verwenden. Ein leerer Pfad wird als ungültig betrachtet.

d = 
  none      |
  <string>  

Dieses Beispiel zeigt den grundlegenden Anwendungsfall von d und wie die CSS-d-Eigenschaft Vorrang vor dem d-Attribut hat.

HTML

Wir fügen zwei identische <path>-Elemente in ein SVG ein; ihre d-Attributwerte sind "m 5,5 h 90 v 90 h -90 v -90 z", was ein 90px Quadrat erzeugt.

<svg>
  <path d="m 5,5 h 90 v 90 h -90 v -90 z" />
  <path d="m 5,5 h 90 v 90 h -90 v -90 z" />
</svg>

CSS

Mit CSS gestalten wir beide Pfade, indem wir einen schwarzen stroke und ein halbtransparentes rotes fill verwenden. Dann verwenden wir die d-Eigenschaft, um den Wert des SVG-d-Attributs nur für den letzten Pfad zu überschreiben. Der Browser rendert SVG-Bilder standardmäßig mit 300px Breite und 150px Höhe.

svg {
  border: 1px solid;
}

path {
  fill: #f338;
  stroke: #000;
}

path:last-of-type {
  d: path(
    "M10,30 A20,20 0,0,1 50,30 A20,20 0,0,1 90,30 Q90,60 50,90 Q10,60 10,30 z"
  );
}

Ergebnisse

Der zweite <path> ist ein Herz, wie es im path()-Funktionswert der CSS-d-Eigenschaft definiert ist. Der ungestylte <path>-Pfad blieb ein Quadrat, wie es im d-Attributwert seines SVG definiert ist.

Dieses Beispiel zeigt die Animation des d-Attributwertes.

HTML

Wir erstellen ein <svg>, das ein einzelnes <path>-Element enthält.

<svg>
  <path />
</svg>

CSS

Wir verwenden das d-Attribut, um ein Herz mit einer Linie durch es zu definieren. Wir verwenden CSS, um das fill, den stroke und die stroke-width dieses Pfades zu definieren und fügen eine zweisekündige transition hinzu. Wir fügen einen :hover-Stil hinzu, der eine leicht unterschiedliche path()-Funktion enthält; der Pfad hat die gleiche Anzahl von Datenpunkten wie der Standardzustand, wodurch der Pfad animierbar wird.

svg {
  border: 1px solid;
}

path {
  d: path(
    "M10,30 A20,20 0,0,1 50,30 A20,20 0,0,1 90,30 Q90,60 50,90 Q10,60 10,30 z M90,5 L5,90"
  );
  transition: all 2s;
  fill: none;
  stroke: red;
  stroke-width: 3px;
}

svg:hover path {
  d: path(
    "M10,30 A20,20 0,0,1 50,30 A20,20 0,0,1 90,30 Q90,60 50,90 Q10,60 10,30 z M5,5 L90,90"
  );
  stroke: black;
}

Ergebnisse

Um die Animation zu sehen, fahren Sie mit der Maus über das SVG.

• SVG d Attribut
• fill
• stroke
• path() Funktion
• <basic-shape> Datentyp
• Überblick über CSS-Formen
• CSS-Formen Modul