d-Eigenschaft

Die d CSS Eigenschaft definiert einen Pfad, der vom 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 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.

Formale Definition

Anfangswertnone
Anwendbar auf<path> element in <svg>
VererbtNein
Berechneter Wertwie angegeben
Animationstypja, wie angegeben für <basic-shape>, ansonsten nein

Formale Syntax

d = 
none |
<string>

Beispiele

Pfaddaten angeben

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.

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 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.

css
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.

Datenpfade animieren

Dieses Beispiel zeigt die Animation des d-Attributwertes.

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 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.

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

Ergebnisse

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

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# TheDProperty

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
d

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

Siehe auch