`d` CSS property

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Die d-CSS-Eigenschaft definiert einen Pfad, der durch das SVG-<path>-Element gezeichnet werden soll. Wenn vorhanden, überschreibt sie das d-Attribut des Elements.

Hinweis: Die d-Eigenschaft gilt nur für <path>-Elemente, die in einem <svg> verschachtelt sind. Sie gilt nicht für andere SVG-Elemente noch für HTML-Elemente oder Pseudo-Elemente.

Syntax

css

/* Default */
d: none;

/* Basic usage */
d: path("m 5,5 h 35 L 20,30 z");
d: path("M 0,25 l 50,150 l 200,50 z");
d: path("M 10,5 l 90,0 -80,80 0,-60 80,80 -90,0 z");

/* Global values */
d: inherit;
d: initial;
d: revert;
d: revert-layer;
d: unset;

Werte

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

none: Es wird kein Pfad gezeichnet.
path(<string>): Eine path()-Funktion mit einem in Anführungszeichen gesetzten Datenstring-Parameter. Der Datenstring definiert einen SVG-Pfad. Der SVG-Pfad-Datenstring enthält Pfadbefehle, die implizit Pixeleinheiten verwenden. Ein leerer Pfad wird als ungültig betrachtet.

Formale Definition

Anfangswert	`none`
Anwendbar auf	`<path>` element in `<svg>`
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	ja, wie angegeben für `<basic-shape>`, ansonsten nein

Formale Syntax

d = 
  none      |
  <string>

Beispiele

Pfaddaten angeben

Dieses Beispiel demonstriert 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 einem SVG ein; deren d-Attributwerte sind "m 5,5 h 90 v 90 h -90 v -90 z", was ein 90px-Quadrat erzeugt.

html

<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 stylen wir beide Pfade, indem wir einen schwarzen stroke und eine halbtransparente rote fill bereitstellen. 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 300px breit und 150px hoch.

css

svg {
  border: 1px solid;
}

path {
  fill: #ff333388;
  stroke: black;
}

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 in dem path()-Funktionswert der CSS-d-Eigenschaft definiert. Der ungestylte <path> blieb ein Quadrat, wie in seinem SVG-d-Attributwert definiert.

Datenpfade animieren

Dieses Beispiel zeigt, wie der d-Attributwert animiert werden kann.

HTML

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

html

<svg>
  <path />
</svg>

CSS

Wir verwenden das d-Attribut, um ein Herz mit einem durchgehenden Strich zu definieren. Mit CSS definieren wir die fill, stroke und stroke-width dieses Pfades und fügen einen zweisekündigen transition hinzu. Wir fügen einen :hover-Stil hinzu, der eine leicht abweichende path()-Funktion enthält; der Pfad hat die gleiche Anzahl von Datenpunkten wie der Standardzustand, wodurch der Pfad animierbar wird.

css

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;
}