stroke-dashoffset CSS property

Syntax

/* Keyword */
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> Nicht standardisiert

Eine Anzahl von SVG-Einheiten, deren Größe durch den aktuellen Raum definiert wird. Der angegebene Wert, wenn er ungleich 0 ist, verschiebt den Startpunkt vom Beginn des Strichmusters zu einem anderen Punkt innerhalb desselben. Positive Werte scheinen das Strich-Lücken-Muster nach hinten zu verschieben, während negative Werte das Muster nach vorne verschieben.

<length>

Pixeleinheiten werden genauso wie SVG-Einheiten behandelt (siehe <number>, oben), und schriftbasierte Längen wie em werden in Bezug auf den SVG-Wert des Elements für die Schriftgröße berechnet; die Auswirkungen anderer Längeneinheiten können je nach Browser variieren. Der Verschiebungseffekt bei jedem Wert ist derselbe wie bei <number>-Werten (siehe oben).

<percentage>

Prozentsätze beziehen sich auf die normalisierte Diagonale des aktuellen SVG-Viewports, die wie folgt berechnet wird: $\frac{\sqrt{{\mathrm{<width>}}^2+{\mathrm{<height>}}^2}}{\sqrt{2}}$, nicht auf die Gesamtlänge des Strichpfades. 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 zuerst fünf identische Pfade ein, die alle ein Strichmuster-Array aus einem 20-Einheiten-Strich gefolgt von einer 3-Einheiten-Lücke über das SVG-Attribut stroke-dasharray haben. (Dies könnte auch mit der CSS-Eigenschaft stroke-dasharray erfolgen.) 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="#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%;
}

In der Reihenfolge:

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

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