stroke-width
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.
Die stroke-width CSS-Eigenschaft definiert die Breite eines auf eine SVG-Form angewendeten Strichs. Wenn vorhanden, überschreibt sie das stroke-width-Attribut des Elements.
Diese Eigenschaft gilt für jede SVG-Form oder Textinhaltselement (siehe stroke-width für eine vollständige Liste), kann jedoch als vererbte Eigenschaft auf Elemente wie <g> angewendet werden und hat dennoch die beabsichtigte Wirkung auf die Striche der Nachkommenelemente. Wenn der Wert auf Null gesetzt wird, wird der Strich nicht gezeichnet.
Syntax
/* Length and percentage values */
stroke-width: 0%;
stroke-width: 1.414px;
/* Global values */
stroke-width: inherit;
stroke-width: initial;
stroke-width: revert;
stroke-width: revert-layer;
stroke-width: unset;
Werte
<length>-
Pixeleinheiten werden genauso behandelt wie SVG-Einheiten (siehe
<number>, oben), und auf Schriften basierende Längen wieemwerden in Bezug auf den SVG-Wert des Elements für die Textgröße berechnet; die Auswirkungen anderer Längeneinheiten können vom Browser abhängen. <percentage>-
Prozentsätze beziehen sich auf die normalisierte Diagonale des aktuellen SVG-Ansichtsfensters, welche wie folgt berechnet wird: .
<number>Nicht standardisiert-
Eine Anzahl von SVG-Einheiten, deren Größe durch den aktuellen Einheitraum definiert ist.
Formale Definition
| Anfangswert | 1px |
|---|---|
| Anwendbar auf | <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect> elements in an svg |
| Vererbt | Ja |
| Prozentwerte | refer to the normalized diagonal measure of the current SVG viewport's applied viewBox, or of the viewport itself if no viewBox is specified |
| Berechneter Wert | an absolute <length> or <percentage>, numbers converted to absolute lengths first |
| Animationstyp | by computed value type |
Formale Syntax
stroke-width =
[ <length-percentage> | <number> ]#
<length-percentage> =
<length> |
<percentage>
Beispiele
Verschiedene Strichbreiten
Dieses Beispiel zeigt verschiedene Wertsyntaxe für die stroke-width-Eigenschaft.
HTML
Zuerst richten wir fünf Pfade mit mehreren Segmenten ein, die alle einen schwarzen Strich mit einer Breite von eins und keine Füllung verwenden. Jeder Pfad erstellt eine Serie von Bergsymbolen, die von links (ein flacher Winkel) nach rechts (ein extremer Winkel) verlaufen.
<svg viewBox="0 0 39 30" xmlns="http://www.w3.org/2000/svg">
<g stroke="black" stroke-width="1" fill="none">
<path
d="M1,5 l7 ,-3 l7 ,3
m2,0 l3.5 ,-3 l3.5 ,3
m2,0 l2 ,-3 l2 ,3
m2,0 l0.75,-3 l0.75,3
m2,0 l0.5 ,-3 l0.5 ,3" />
<path
d="M1,8 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
<path
d="M1,14 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
<path
d="M1,18 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
<path
d="M1,26 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
</g>
</svg>
CSS
Bei den ersten vier Pfaden wenden wir Strichbreitenwerte als Paare an, um zu zeigen, wie nackte Zahlenwerte und Pixelwerte funktional gleichwertig sind. Für die ersten beiden Pfade sind die Werte .25 und .25px. Für die zweiten beiden Pfade sind die Werte 1 und 1px.
Für den fünften und letzten Pfad wird ein Wert von 5% angewendet, wodurch eine Strichbreite festgelegt wird, die fünf Prozent so breit ist, wie die Diagonale des SVG-Ansichtsfensters lang ist.
path:nth-child(1) {
stroke-width: 0.25;
}
path:nth-child(2) {
stroke-width: 0.25px;
}
path:nth-child(3) {
stroke-width: 1;
}
path:nth-child(4) {
stroke-width: 1px;
}
path:nth-child(5) {
stroke-width: 5%;
}
Ergebnisse
Spezifikationen
| Specification |
|---|
| CSS Fill and Stroke Module Level 3 # stroke-width |
Browser-Kompatibilität
Loading…