stroke-dashoffset CSS property

Syntax

/* Keyword value */
stroke-dashoffset: none;

/* Length and percentage values */
stroke-dashoffset: 2;
stroke-dashoffset: 2px;
stroke-dashoffset: 2%;

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

Werte

<number>

Eine Anzahl von SVG-Einheiten, deren Größe durch den aktuellen Einheitenraum definiert wird. Der angegebene Wert verschiebt, sofern er nicht 0 ist, den Startpunkt vom Beginn des Strichmusters zu einem anderen Punkt innerhalb dieses Musters. Daher scheinen positive Werte das Strich-Lücken-Muster rückwärts zu verschieben, während negative Werte das Muster vorwärts zu verschieben scheinen.

<length>

Pixeleinheiten werden genauso behandelt wie SVG-Einheiten (siehe <number> oben), und schriftbasierte Längen wie em werden in Bezug auf den SVG-Wert des Elements für die Textgröße berechnet; die Auswirkungen anderer Längeneinheiten können vom Browser abhängen. Der Verschiebungseffekt für jeden Wert entspricht dem von <number>-Werten (siehe oben).

<percentage>

Prozentwerte beziehen sich auf die normalisierte Diagonale des aktuellen SVG-Viewports, die als $\frac{\sqrt{{\mathrm{<width>}}^2+{\mathrm{<height>}}^2}}{\sqrt{2}}$ berechnet wird, nicht auf die Gesamtlänge des Strichpfads. Negative Werte sind ungültig.

Formale Definition

Formale Syntax

stroke-dashoffset = 
  <length-percentage>  |
  <number>             

<length-percentage> = 
  <length>      |
  <percentage>  

Beispiele

Strichversatz

Um zu zeigen, wie Striche versetzt werden können, richten wir zunächst fünf identische Pfade ein, die alle über das SVG-Attribut stroke-dasharray ein Strichmuster aus einem 20-Einheiten-Strich gefolgt von einer 3-Einheiten-Lücke erhalten. (Dies hätte auch mit der CSS-Eigenschaft stroke-dasharray erfolgen können.) Den Pfaden werden dann über CSS individuelle Strichversätze zugewiesen.

<svg viewBox="0 0 100 50" width="500" height="250">
  <rect x="10" y="5" width="80" height="30" fill="#eeeeee" />
  <g stroke="dodgerblue" stroke-width="2" stroke-dasharray="20,3">
    <path d="M 10,10 h 80" />
    <path d="M 10,15 h 80" />
    <path d="M 10,20 h 80" />
    <path d="M 10,25 h 80" />
    <path d="M 10,30 h 80" />
  </g>
</svg>

path:nth-of-type(1) {
  stroke-dashoffset: 0;
}
path:nth-of-type(2) {
  stroke-dashoffset: -5;
}
path:nth-of-type(3) {
  stroke-dashoffset: 5;
}
path:nth-of-type(4) {
  stroke-dashoffset: 5px;
}
path:nth-of-type(5) {
  stroke-dashoffset: 5%;
}

Der Reihe nach:

1. Der erste der fünf Pfade erhält einen Versatz von null, was dem Standardverhalten entspricht.
2. Der zweite Pfad erhält einen Versatz von -5, wodurch der Startpunkt des Musters auf fünf Einheiten vor dem Nullpunkt verschoben wird. Der sichtbare Effekt besteht darin, dass das Strichmuster um fünf Einheiten nach vorn verschoben wird; daher sehen wir am Beginn des Pfads die letzten zwei Einheiten eines Strichs und anschließend eine Drei-Einheiten-Lücke.
3. Der dritte Pfad hat einen Versatz von 5, was bedeutet, dass der Startpunkt der Striche fünf Einheiten innerhalb des Strichmusters liegt. Der sichtbare Effekt besteht darin, das Strichmuster um fünf Einheiten nach hinten zu verschieben; daher sehen wir am Beginn des Pfads die letzten fünfzehn Einheiten eines Strichs, gefolgt von einer Drei-Einheiten-Lücke.
4. Der vierte Pfad hat einen Versatz von 5px, der dieselbe Wirkung wie ein Wert von 5 hat (siehe vorheriges Beispiel).
5. Der fünfte und letzte Pfad hat einen Versatz von 5%, der den vorherigen beiden Beispielen sehr ähnlich ist, aber nicht ganz gleich. Prozentwerte werden anhand des Diagonalmaßes des SVG-Viewports berechnet und können daher je nach Größe und Seitenverhältnis dieses Viewports variieren.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• SVG-Attribut stroke-dashoffset
• CSS-Eigenschaft stroke-dasharray
• CSS-Eigenschaft stroke