stroke-width CSS property
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit April 2017 browserübergreifend verfügbar.
Die stroke-width CSS-Eigenschaft definiert die Breite eines Strichs, der auf die SVG-Form angewendet wird. Wenn vorhanden, überschreibt sie das stroke-width-Attribut des Elements.
Diese Eigenschaft gilt für jede SVG-Form oder Text-Inhalts-Element (sehen Sie stroke-width für eine vollständige Liste), aber als vererbte Eigenschaft kann sie auf Elemente wie <g> angewendet werden und dennoch die beabsichtigte Wirkung auf die Striche von Nachkommenelementen haben. Wenn der Wert auf null bewertet 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 schriftbasierte Längen wieemwerden in Bezug auf den SVG-Wert der Textgröße des Elements berechnet; die Auswirkungen anderer Längeneinheiten können vom Browser abhängen. <percentage>-
Prozentsätze beziehen sich auf die normalisierte Diagonale des aktuellen SVG-Viewports, die wie folgt berechnet wird: .
<number>Nicht standardisiert-
Eine Anzahl von SVG-Einheiten, deren Größe durch den aktuellen Einheitenraum 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> | <line-width> | <number> ]#
<length-percentage> =
<length> |
<percentage>
<line-width> =
<length [0,∞]> |
hairline |
thin |
medium |
thick
Beispiele
Verschiedene Strichbreiten
Dieses Beispiel demonstriert verschiedene Wert-Syntaxen für die stroke-width-Eigenschaft.
HTML
Zuerst richten wir fünf mehrteilige Pfade ein, die alle einen schwarzen Strich mit einer Breite von eins und keine Füllung verwenden. Jeder Pfad erzeugt eine Reihe von Bergsymbolen, die von links (ein flacher Eckwinkel) nach rechts (ein extrem scharfer Eckwinkel) 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
Für die ersten vier Pfade wenden wir Strichbreitenwerte als Paare an, um zu zeigen, wie einfache Zahlenwerte und Pixelwerte funktional äquivalent 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 Messung des SVG-Viewports 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
| Spezifikation |
|---|
| CSS Fill and Stroke Module Level 3 # stroke-width |