stroke
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Die stroke
CSS Eigenschaft definiert die Farbe oder den SVG-Mal-Server, der verwendet wird, um den Strich eines Elements zu zeichnen. Daher hat stroke
nur eine Auswirkung auf Elemente, denen ein Strich zugewiesen werden kann (zum Beispiel <rect>
oder <ellipse>
); auf der Seite über das SVG stroke
Attribut finden Sie eine vollständige Liste. Wenn deklariert, überschreibt der CSS-Wert jeden Wert des stroke
SVG-Attributs des Elements.
Hinweis: Laut dem Entwurf vom 4. April 2017 der Spezifikation CSS Fill and Stroke Module Level 3 ist die stroke
Eigenschaft eine Abkürzung für eine Reihe anderer Stricheigenschaften. In der Praxis, Stand August 2024, unterstützen Browser nicht die Einstellung anderer streifenbezogener Werte wie Breite oder Strichmuster über die stroke
Eigenschaft, sondern behandeln sie stattdessen als direktes Analog zum SVG stroke
Attribut.
Syntax
/* assorted color values */
stroke: rgb(153 51 102 / 1);
stroke: color-mix(in lch, var(--primaryColor) 35%, gray 15%));
stroke: dodgerblue;
stroke: currentColor;
stroke: transparent;
stroke: context-stroke;
/* Global values */
stroke: inherit;
stroke: initial;
stroke: revert;
stroke: revert-layer;
stroke: unset;
Werte
<color>
-
Setzt das Malen des Strichs mit jedem gültigen CSS-Farbwert.
<image>
-
Setzt das Malen des Strichs mit dem, was SVG einen paint server nennt, was in diesem Kontext ein SVG-Verlauf oder -Muster ist. CSS-Verläufe können nicht mit der
stroke
Eigenschaft verwendet werden. context-stroke
-
Veranlasst, dass ein Element seine Strichdefinition von seinem Kontextelement "erbt". Wenn es kein gültiges Kontextelement gibt, wird dieser Wert dazu führen, dass für den Strich keine Farbe verwendet wird.
Formale Definition
Initialer Wert | wie die jeweiligen Kurzschreibweisen:
|
---|---|
Anwendbar auf | wie die jeweiligen Kurzschreibweisen: |
Vererbt | Ja |
Berechneter Wert | wie die jeweiligen Kurzschreibweisen: |
Animationstyp | wie die jeweiligen Kurzschreibweisen:
|
Formale Syntax
stroke =
<paint>
<paint> =
none |
<image> |
<svg-paint>
<image> =
<url> |
<gradient>
<svg-paint> =
child |
child( <integer> )
<url> =
<url()> |
<src()>
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
Beispiele
Grundlegendes Farbstrichzeichnen
In diesem Beispiel erstellen wir zwei verschiedene Formen, einen Kreis und ein Rechteck, die Teil einer <g>
(Gruppe) sind, die als Standard für die beiden Formen eine graue Strichfarbe hat.
<svg>
<g fill="none" stroke="gray" stroke-width="10">
<circle cx="100" cy="100" r="40" />
<rect x="20" y="20" width="80" height="80" />
</g>
</svg>
Über CSS wenden wir dann eine düstere violette Farbe auf das Rechteck und eine rote auf den Kreis an.
rect {
stroke: hsl(270deg 50% 40%);
}
circle {
stroke: red;
}
Musterstrichzeichnen
Dieses Beispiel verwendet die gleiche Gruppe und Formen (mit dem Kreis etwas weiter zu einem anderen Ort verschoben) wie im vorherigen Beispiel, definiert jedoch zusätzlich ein SVG-Muster.
<svg>
<g fill="none" stroke="gray" stroke-width="23">
<circle cx="150" cy="90" r="40" />
<rect x="20" y="20" width="80" height="80" />
</g>
<defs>
<pattern id="star" viewBox="0,0,10,10" width="10%" height="10%">
<polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2" />
</pattern>
</defs>
</svg>
Das Muster wird dann im CSS mit einem URL-Wert auf die ID des Musters verwiesen. Dieses Muster wird auf beide Formen als Strichfarbe angewendet, mit dem gezeigten Ergebnis.
rect,
circle {
stroke: url(#star);
}
Das Muster wird relativ zu den Begrenzungsrahmen der Formen gezeichnet, was zu einer visuellen Überlagerung führen kann, wenn sie sich überschneiden, da Teile des Musters transparent sind.
SVG- versus CSS-Verläufe
Hier verwenden wir erneut die gleiche Gruppe-und-Formen-Markup wie im ersten Beispiel, fügen jedoch eine Definition für einen SVG-Verlauf hinzu.
<svg>
<g fill="none" stroke="gray" stroke-width="10">
<circle cx="100" cy="100" r="40" />
<rect x="20" y="20" width="80" height="80" />
</g>
<defs>
<linearGradient id="greenwhite">
<stop offset="0%" stop-color="green" />
<stop offset="100%" stop-color="white" />
</linearGradient>
</defs>
</svg>
Im CSS wenden wir diesen SVG-Verlauf auf das Rechteck mit einem URL-Wert an, der auf die ID des linearen Verlaufs zeigt. Auf den Kreis wenden wir einen CSS-linearen Verlauf an, der im Sinn dem SVG-Verlauf entspricht.
rect {
stroke: url(#greenwhite);
}
circle {
stroke: linear-gradient(90deg, green, white);
}
Nur das Rechteck erhält einen Verlaufsstrich, während der Kreis auf den grauen Strich zurückgreift, der durch das Gruppenelement festgelegt wurde. Dies geschieht, weil CSS-Verläufe keine gültigen Werte für die stroke
Eigenschaft sind, während URL-Referenzen auf SVG-Verläufe zugelassen sind.
Kontextuelles Strichzeichnen
In diesem Fall beginnen wir erneut mit einem Gruppenelement, in dem zwei rechteckige Pfade definiert sind. Danach werden ein linearer Verlauf und ein SVG-Marker definiert.
<svg>
<g fill="none" stroke="gray" stroke-width="4">
<path d="M 20,20 l 180,0 0,100 -180,0 z" />
<path d="M 100,40 l 180,0 0,100 -180,0 z" />
</g>
<defs>
<linearGradient id="orangered">
<stop offset="0%" stop-color="orange" />
<stop offset="100%" stop-color="red" />
</linearGradient>
<marker
id="circle"
markerWidth="20"
markerHeight="20"
refX="10"
refY="10"
markerUnits="userSpaceOnUse">
<circle
cx="10"
cy="10"
r="8"
stroke-width="4"
stroke="none"
fill="none" />
</marker>
</defs>
</svg>
Wir schreiben dann CSS, um einen Marker für beide Pfade hinzuzufügen und auch eine düstere lila Strichfarbe zu haben. Dies wird für den zweiten Pfad überschrieben, dem ein URL-Wert gegeben wird, um den orange-zu-roten Verlauf als seinen Strich anzuwenden. Schließlich setzen wir das Kreiselement im Markerelement so, dass es einen Strichwert von context-stroke
hat.
path {
stroke: hsl(270deg 50% 40%);
marker: url(#circle);
}
path:nth-of-type(2) {
stroke: url(#orangered);
}
marker circle {
stroke: context-stroke;
}
Da stroke-context
auf ein Element angewendet wird, das von einem <marker>
Element abstammt, ist das Kontextelement für jeden Kreis das Element, das das <marker>
Element aufgerufen hat; das heißt, die <path>
Elemente. Das Ergebnis ist, dass die Marker auf dem ersten Pfad die Farbe des aufrufenden Pfades verwenden und lila sind. Die Marker auf dem zweiten Pfad hingegen verwenden den gleichen orange-zu-roten SVG-Verlauf, den der Pfad verwendet. Dieser letztere Fall illustriert, wie SVG-Verläufe als einzelner Verlauf auf die gesamte Form angewendet werden, anstatt auf jedes individuelle Teil der Form.
Spezifikationen
Specification |
---|
Scalable Vector Graphics (SVG) 2 # SpecifyingStrokePaint |
Browser-Kompatibilität
BCD tables only load in the browser