stroke-dashoffset

<number> Nicht standardisiert

Eine Anzahl von SVG-Einheiten, deren Größe durch den aktuellen Einheitenraum definiert ist. Der angegebene Wert, wenn er ungleich 0 ist, bewegt den Startpunkt vom Beginn des Strichmusters zu einem anderen Punkt innerhalb desselben. Positive Werte verschieben das Strichlückenmuster rückwärts und negative Werte verschieben das Muster vorwärts.

<length>

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

<percentage>

Prozentsätze 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 Strichpfades. Negative Werte sind ungültig.

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

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

Um zu zeigen, wie Striche versetzt werden können, richten wir zuerst fünf identische Pfade ein, die alle ein Strichmuster von einem 20-Einheiten-Strich gefolgt von einer 3-Einheiten-Lücke über das SVG-Attribut stroke-dasharray erhalten. (Dies könnte auch mit der CSS-Eigenschaft stroke-dasharray gemacht worden sein.) Die Pfade erhalten dann individuelle Strichversätze über CSS.

<svg viewBox="0 0 100 50" width="500" height="250">
  <rect x="10" y="5" width="80" height="30" fill="#EEE" />
  <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%;
}

In Reihenfolge:

1. Der erste der fünf Pfade erhält keinen Versatz, was das Standardverhalten ist.
2. Der zweite Pfad erhält einen Versatz von -5, was den Startpunkt des Musters um fünf Einheiten vor den Nullpunkt verschiebt. Der visuelle Effekt ist, dass das Strichmuster um fünf Einheiten nach vorne geschoben wird; somit sehen wir am Anfang des Pfades die letzten zwei Einheiten eines Strichs und dann eine drei Einheiten große Lücke.
3. Der dritte Pfad hat einen Versatz von 5, was bedeutet, dass der Startpunkt der Striche fünf Einheiten in das Strichmuster eintaucht. Der visuelle Effekt ist, das Strichmuster um fünf Einheiten nach hinten zu schieben; somit sehen wir am Anfang des Pfades die letzten fünfzehn Einheiten eines Strichs gefolgt von einer drei Einheiten großen Lücke.
4. Der vierte Pfad hat einen Versatz von 5px, was denselben Effekt wie ein Wert von 5 hat (siehe vorherigen Punkt).
5. Der fünfte und letzte Pfad hat einen Versatz von 5%, der dem der vorherigen zwei Beispiele sehr ähnlich ist, aber nicht ganz gleich. Prozentsätze werden gegen die Diagonalmessung des SVG-Viewports berechnet und können daher je nach Größe und Seitenverhältnis des Viewports variieren.

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