stroke-dashoffset

<number> Nicht standardisiert

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

<length>

Pixeleinheiten werden wie SVG-Einheiten behandelt (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 Auswirkungen anderer Längeneinheiten können vom Browser abhängen. Der Verschiebungseffekt für jeden Wert ist der gleiche wie für <number>-Werte (siehe oben).

<percentage>

Prozentsätze beziehen sich auf die normalisierte Diagonale des aktuellen SVG-Anzeigefensters, 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.

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

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

Um zu zeigen, wie Striche verschoben werden können, richten wir zunächst 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 hätte auch mit der CSS-Eigenschaft stroke-dasharray gemacht werden können.) Die Pfade erhalten dann individuelle Strichverschiebungen ü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 eine Nullverschiebung, was das Standardverhalten ist.
2. Der zweite Pfad erhält eine Verschiebung von -5, die den Startpunkt des Strichmusters fünf Einheiten vor dem Nullpunkt verlagert. Der visuelle Effekt ist, dass das Strichmuster fünf Einheiten nach vorne geschoben wird; wir sehen also am Anfang des Pfades die letzten zwei Einheiten eines Strichs und dann eine dreieinheiten Lücke.
3. Der dritte Pfad hat eine Verschiebung von 5, was bedeutet, dass der Startpunkt der Striche fünf Einheiten in das Strichmuster verlagert ist. Der visuelle Effekt ist, das Strichmuster um fünf Einheiten nach hinten zu schieben; wir sehen also am Anfang des Pfades die letzten fünfzehn Einheiten eines Strichs gefolgt von einer dreieinheiten Lücke.
4. Der vierte Pfad hat eine Verschiebung von 5px, was denselben Effekt wie ein Wert von 5 hat (siehe vorher).
5. Der fünfte und letzte Pfad hat eine Verschiebung von 5%, was sehr ähnlich zu den vorherigen zwei Beispielen ist, aber nicht ganz dasselbe. Prozentsätze werden gegen das diagonale Maß des SVG-Anzeigefensters berechnet und können daher je nach Größe und Seitenverhältnis dieses Anzeigefensters variieren.

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