Diestop-opacityCSS Eigenschaft definiert die Deckkraft eines bestimmten Farbverlaufsstopps im SVG-<stop>-Element innerhalb eines SVG-Gradienten. Wenn vorhanden, überschreibt sie dasstop-opacity-Attribut des Elements.

Der Eigenschaftswert wirkt sich auf den Alphakanal desstop-color aus; er kann die Transparenz der Farbe eines<stop> erhöhen, kann jedoch die durch die Eigenschaftstop-color definierte Farbe nicht undurchsichtiger machen.

Syntax

/* numeric and percentage values */stop-opacity: 0.2;stop-opacity: 20%;/* Global values */stop-opacity: inherit;stop-opacity: initial;stop-opacity: revert;stop-opacity: revert-layer;stop-opacity: unset;

Werte

Der<opacity-value> ist eine<number> oder<percentage>, die die Deckkraft des<stop>-Elements eines SVG-Gradienten angibt.

<number>

Ein numerischer Wert zwischen0 und1, einschließlich.

<percentage>

Ein Prozentwert zwischen0% und100%, einschließlich.

Bei der Einstellung von0 oder0% ist der Stopp vollständig transparent. Mit der Einstellung von1 oder100% ist das Element die volle Deckkraft desstop-color-Werts, was teilweise undurchsichtig sein kann oder auch nicht.

Offizielle Definition

Offizielle Syntax

stop-opacity =
<number>|
<percentage>

Beispiele

Die Deckkraft eines SVG-Farbverlaufsstopps definieren

Dieses Beispiel zeigt den grundlegenden Anwendungsfall vonstop-opacity und wie die CSS-Eigenschaftstop-opacity dasstop-opacity-Attribut überlagert.

HTML

Wir haben ein SVG mit einigen<polygon>-Sternen und drei<linearGradient>-Elementen: Jedes enthält drei<stop>-Elemente, die drei Farbstopps definieren, die einen Farbverlauf von Blau zu Weiß zu Pink erstellen; der einzige Unterschied zwischen ihnen ist derid-Wert.

<svg viewBox="0 0 250 120" xmlns="http://www.w3.org/2000/svg">  <defs>    <linearGradient>      <stop offset="5%" stop-color="#66ccff" stop-opacity="1" />      <stop offset="50%" stop-color="#fefefe" stop-opacity="1" />      <stop offset="95%" stop-color="#f4aab9" stop-opacity="1" />    </linearGradient>    <linearGradient>      <stop offset="5%" stop-color="#66ccff" stop-opacity="1" />      <stop offset="50%" stop-color="#fefefe" stop-opacity="1" />      <stop offset="95%" stop-color="#f4aab9" stop-opacity="1" />    </linearGradient>    <linearGradient>      <stop offset="5%" stop-color="#66ccff" stop-opacity="1" />      <stop offset="50%" stop-color="#fefefe" stop-opacity="1" />      <stop offset="95%" stop-color="#f4aab9" stop-opacity="1" />    </linearGradient>  </defs>  <polygon points="40,10 10,100 80,40 0,40 70,100" />  <polygon points="125,10 95,100 165,40 85,40 155,100" />  <polygon points="210,10 180,100 250,40 170,40 240,100" /></svg>

CSS

Wir fügen einenstroke undstroke-width hinzu, um die Polygon-Pfadenlinie sichtbar zu machen.

Jedespolygon hat einen Farbverlaufs-Hintergrund, der mit derfill-Eigenschaft festgelegt wurde; dieid des Farbverlaufs ist derurl()-Parameter. Wir setzenmagenta als Ersatzfarbe.

Wir definieren die Deckkraft der Stops jedes Farbverlaufs mit derstop-opacity-Eigenschaft.

Das SVG hat einen gestreiften Hintergrund, um die Einstellungen zur Transparenz besser sichtbar zu machen.

svg {  border: 1px solid;  height: calc(100vh - 20px);  margin-bottom: 10px;  background: repeating-linear-gradient(    to top left,    white 0 9px,    black 9px 10px  );}

polygon {  stroke: #333333;  stroke-width: 1px;}polygon:nth-of-type(1) {  fill: url("#myGradient1") magenta;}polygon:nth-of-type(2) {  fill: url("#myGradient2") magenta;}polygon:nth-of-type(3) {  fill: url("#myGradient3") magenta;}#myGradient1 stop {  stop-opacity: 1;}#myGradient2 stop {  stop-opacity: 0.8;}#myGradient3 stop {  stop-opacity: 25%;}

Ergebnisse

Der erste Stern ist vollständig undurchsichtig. Die Füllung des zweiten Sterns ist zu 80% undurchsichtig, da die Farbstopps leicht durchsichtig sind; diestop-opacity: 0.8; überlagerte denstop-opacity="1"-Elementattributwert. Die Füllung des letzten Sterns ist kaum merklich mit Farbstopps, die zu 25% durchsichtig sind. Beachten Sie, dass der Strich in jedem Fall dasselbe undurchsichtige Dunkelgrau ist.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• SVGstop-opacity Attribut
• Darstellungseigenschaften:stop-opacity,clip-rule,color-interpolation-filters,fill-opacity,fill-rule,fill,marker-end,marker-mid,marker-start,shape-rendering,stop-color,stroke,stroke-dasharray,stroke-dashoffset,stroke-linecap,stroke-linejoin,stroke-miterlimit,stroke-opacity,stroke-width,text-anchor, undvector-effect
• opacity
• background-color
• <color>
• <basic-shape> Datentyp