stroke CSS property

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>

Bestimmt das Bemalen des Umrisses mit einem beliebigen gültigen CSS-Farbwert.

<image>

Bestimmt das Bemalen des Umrisses mit dem, was SVG einen paint server nennt, was in diesem Zusammenhang ein SVG-Verlauf oder -Muster ist. CSS-Verläufe können nicht mit der stroke-Eigenschaft verwendet werden.

context-stroke

Führt dazu, dass ein Element seine Stroke-Definition von seinem context element "erbt". Wenn es kein gültiges Kontext-Element gibt, wird dieser Wert dazu führen, dass keine Farbe für den Umriss verwendet wird.

Formale Definition

Formale Syntax

stroke = 
  <paint>  

<paint> = 
  none         |
  <image>      |
  <svg-paint>  

<image> = 
  <url>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<svg-paint> = 
  child               |
  child( <integer> )  

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<integer> = 
  <number-token>  

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>  

Beispiele

Grundlegendes Färben des Umrisses

In diesem Beispiel erstellen wir zwei verschiedene Formen, einen Kreis und ein Rechteck, die Teil eines <g> (Gruppe) sind, die eine graue Umrissfarbe als Standard für die beiden Formen 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 Rot auf den Kreis an.

rect {
  stroke: rebeccapurple;
}
circle {
  stroke: red;
}

Musterumrisse

Dieses Beispiel verwendet dieselbe Gruppe und Formen (mit dem etwas verschobenen Kreis) wie im vorherigen Beispiel, definiert aber auch 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, der auf die ID des Musters verweist, referenziert. Dieses Muster wird auf beide Formen als Bemalung des Umrisses angewendet, wobei das Ergebnis gezeigt wird.

rect,
circle {
  stroke: url("#star");
}

Das Muster wird relativ zu den Begrenzungsrahmen der Formen gezeichnet, was zu visuellen Interferenzen führen kann, wenn sie sich überlappen, da Teile des Musters transparent sind.

SVG- versus CSS-Verläufe

Hier verwenden wir erneut das gleiche Gruppen- und Formenmarkup wie im ersten Beispiel, fügen jedoch auch 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 über einen URL-Wert, der auf die ID des linearen Verlaufs verweist, auf das Rechteck an. Auf den Kreis wenden wir einen CSS-linearen Verlauf an, der im Sinne dem SVG-Verlauf entspricht.

rect {
  stroke: url("#greenwhite");
}
circle {
  stroke: linear-gradient(90deg, green, white);
}

Nur das Rechteck erhält einen Verlauf als Umriss, während der Kreis auf den grauen Umriss zurückfällt, der durch das Gruppenelement gesetzt wurde. Dies passiert, weil CSS-Verläufe keine gültigen Werte für die stroke-Eigenschaft sind, während URL-Referenzen zu SVG-Verläufen erlaubt sind.

Kontextuelles Bestreichen

In diesem Fall beginnen wir wieder mit einem Gruppenelement, in dem zwei rechteckige Pfade definiert sind. Danach werden ein linearer Verlauf und ein SVG-Markierungselement 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 beiden Pfaden eine Markierung hinzuzufügen und auch eine düstere violette Umrissfarbe zu haben. Dies wird für den zweiten Pfad überschrieben, der einen URL-Wert erhält, um den orange-zu-roten Verlauf als Umriss anzuwenden. Schließlich setzen wir das Kreiselement im Markierungselement, um einen context-stroke-Wert zu haben.

path {
  stroke: rebeccapurple;
  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, also die <path>-Elemente. Das Ergebnis ist, dass die Markierungen auf dem ersten Pfad die Farbe des aufrufenden Pfads verwenden und lila sind. Die Markierungen auf dem zweiten Pfad hingegen verwenden denselben orange-zu-roten SVG-Verlauf, den der Pfad verwendet. Dieser letzte Fall veranschaulicht, wie SVG-Verläufe als einzelner Verlauf auf die gesamte Form angewendet werden, anstatt unabhängig auf jeden einzelnen Teil der Form angewendet zu werden.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• stroke-dasharray
• stroke-dashoffset
• stroke-linecap
• stroke-linejoin
• stroke-miterlimit
• stroke-opacity
• stroke-width
• paint-order
• SVG stroke Attribut