stroke-dashoffset

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 Einheit-Raum definiert ist. Wenn ein anderer Wert als 0 angegeben wird, bewegt sich der Startpunkt vom Anfang des Strichmusters zu einem anderen Punkt innerhalb des Musters. Somit scheinen positive Werte 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 auf Schrift basierende Längen wie em werden in Bezug auf den SVG-Wert der Textgröße des Elements berechnet; die Auswirkungen 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-Anzeigefensters, das berechnet wird als $\frac{\sqrt{{\mathrm{<width>}}^2+{\mathrm{<height>}}^2}}{\sqrt{2}}$, 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 ein Strichmuster von einem 20-Einheiten-Strich gefolgt von einem 3-Einheiten-Abstand über das SVG-Attribut stroke-dasharray erhalten. (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 Versatz von Null, was das Standardverhalten ist.
2. Der zweite Pfad erhält einen Versatz von -5, was den Startpunkt des Musters auf fünf Einheiten vor dem Nullpunkt verschiebt. Der visuelle Effekt ist, dass das Strichmuster fünf Einheiten nach vorne geschoben wird; somit sehen wir am Anfang des Pfades die letzten zwei Einheiten eines Striches und dann einen drei Einheiten langen Abstand.
3. Der dritte Pfad hat einen Versatz von 5, das bedeutet, dass der Startpunkt der Striche fünf Einheiten in das Muster hinein ist. Der visuelle Effekt ist, dass das Strichmuster um fünf Einheiten nach hinten geschoben wird; somit sehen wir am Anfang des Pfades die letzten fünfzehn Einheiten eines Striches gefolgt von einem drei Einheiten langen Abstand.
4. Der vierte Pfad hat einen Versatz von 5px, was denselben Effekt wie ein Wert von 5 hat (siehe vorherige Erklärungen).
5. Der fünfte und letzte Pfad hat einen Versatz von 5%, der sehr ähnlich zu den vorherigen beiden Beispielen ist, aber nicht ganz gleich. Prozentsätze werden gegen das Diagonalmass des SVG-Anzeigefensters berechnet und können somit je nach Größe und Seitenverhältnis des Anzeigefensters variieren.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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