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 March 2020.

Das stroke-opacity Attribut ist ein Präsentationsattribut, das die Opazität des Farbservers (Farbe, Gradient, Muster, etc.) definiert, der auf den Umriss einer Form angewendet wird.

Hinweis: Als Präsentationsattribut hat stroke-opacity auch ein entsprechendes CSS-Attribut: stroke-opacity. Wenn beide spezifiziert sind, hat das CSS-Attribut Vorrang.

Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:

Beispiel

html
<svg viewBox="0 0 40 10" xmlns="http://www.w3.org/2000/svg">
  <!-- Default stroke opacity: 1 -->
  <circle cx="5" cy="5" r="4" stroke="green" />

  <!-- Stroke opacity as a number -->
  <circle cx="15" cy="5" r="4" stroke="green" stroke-opacity="0.7" />

  <!-- Stroke opacity as a percentage -->
  <circle cx="25" cy="5" r="4" stroke="green" stroke-opacity="50%" />

  <!-- Stroke opacity as a CSS property -->
  <circle cx="35" cy="5" r="4" stroke="green" style="stroke-opacity: .3;" />
</svg>

Verwendungshinweise

Wert [0-1] | <percentage>
Standardwert 1
Animierbar Ja

Es ist wichtig zu wissen, dass der Umriss teilweise die Füllung einer Form überdeckt. Ein Umriss mit einer Opazität, die nicht 1 ist, wird die darunter liegende Füllung teilweise sichtbar machen. Um diesen Effekt zu vermeiden, ist es möglich, eine globale Opazität mit dem opacity Attribut anzuwenden oder den Umriss hinter die Füllung mit dem paint-order Attribut zu setzen.

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# StrokeOpacity

Browser-Kompatibilität

Siehe auch