stroke-opacity

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-opacity CSS-Eigenschaft definiert die Deckkraft eines SVG-Form-Umrisses. Der Effekt ist identisch mit dem von opacity, außer dass er nur auf den Umriss angewendet wird und nicht auf das gesamte Element. Falls vorhanden, überschreibt er das stroke-opacity-Attribut des Elements.

Diese Eigenschaft gilt für SVG-Formen und Textinhaltelemente (siehe stroke-opacity für eine vollständige Liste), aber als vererbte Eigenschaft kann sie auf Elemente wie <g> angewendet werden und trotzdem die beabsichtigte Wirkung auf die Umrisse der Nachfahren-Elemente haben.

Beachten Sie, dass der Umriss einer Form teilweise die Füllung dieser Form überdeckt. Ein Umriss mit einer Deckkraft von weniger als 1 zeigt die Füllung, die mit dem Umriss dort vermischt ist, wo sie sich überlappen. Um diesen Effekt zu vermeiden, ist es möglich, eine globale Deckkraft mit der opacity-Eigenschaft anzuwenden oder den Umriss hinter die Füllung mit dem paint-order-Attribut zu legen.

Syntax

css

/* numeric and percentage values */
stroke-opacity: 1;
stroke-opacity: 0.3;
stroke-opacity: 50%;

/* Global values */
stroke-opacity: inherit;
stroke-opacity: initial;
stroke-opacity: revert;
stroke-opacity: revert-layer;
stroke-opacity: unset;

Werte

<number>: Jede reelle Zahl von 0 bis 1, einschließlich. Ein Wert von 0 macht den Umriss vollständig transparent, und ein Wert von 1 macht ihn vollständig undurchsichtig. Werte außerhalb des Bereichs 0 – 1 werden auf das nächste Ende dieses Bereichs abgeschnitten; negative Werte werden also auf 0 abgeschnitten.
<percentage>: Das gleiche wie <number> (siehe oben), außer der zulässige Bereich ist 0% bis 100%, und das Abschnitten erfolgt in Bezug auf diesen Bereich.

Formale Definition

Anfangswert	`1`
Anwendbar auf	`<circle>`, `<ellipse>`, `<line>`, `<path>`, `<polygon>`, `<polyline>`, and `<rect>` elements in an `svg`
Vererbt	Ja
Berechneter Wert	der angegebene Wert, auf den Bereich `[0,1]` abgeschnitten
Animationstyp	by computed value type

Formale Syntax

stroke-opacity = 
  <'opacity'>  

<opacity> = 
  <opacity-value>  

<opacity-value> = 
  <number>      |
  <percentage>

Beispiele

Verschiedene Umriss-Deckkräfte

Dieses Beispiel zeigt die grundlegende Verwendung der stroke-opacity-Eigenschaft und wie ein Umriss, dessen Deckkraft weniger als 1 beträgt, mit der Füllung dort vermischt, wo sie sich überlappen.

HTML

Zuerst richten wir fünf Pfade mit mehreren Segmenten ein, die alle einen schwarzen Umriss mit einer Breite von einem und eine dodgerblue-Füllung für die Unterpfade verwenden. Jeder Pfad erstellt eine Reihe von Bergsymbolen, die von links (ein flacher Eckwinkel) nach rechts (ein extremer Eckwinkel) verlaufen.

html

<svg viewBox="0 0 39 36" xmlns="http://www.w3.org/2000/svg">
  <g stroke="black" stroke-width="1" fill="dodgerblue">
    <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,12 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,19 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" />
    <path
      d="M1,33 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 diese Pfade wenden wir nacheinander einen höheren Umriss-Deckkraftwert an. Bei den ersten vier Pfaden ist die Füllung durch die innere Hälfte des Umrisswegs zu sehen, obwohl es beim vierten Pfad schwer zu erkennen sein kann. Beim fünften und letzten Pfad ist der Umriss vollständig undurchsichtig, sodass die Füllung nicht durch den Umriss gesehen werden kann.

css

g path:nth-child(1) {
  stroke-opacity: 0.2;
} /* equiv. 20% */
g path:nth-child(2) {
  stroke-opacity: 0.4;
} /* equiv. 40% */
g path:nth-child(3) {
  stroke-opacity: 0.6;
} /* equiv. 60% */
g path:nth-child(4) {
  stroke-opacity: 0.8;
} /* equiv. 80% */
g path:nth-child(5) {
  stroke-opacity: 1;
} /* equiv. 100% */

Ergebnisse

Spezifikationen

Specification
CSS Fill and Stroke Module Level 3 # stroke-opacity

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden