stop-opacity

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

<number>

Ein numerischer Wert zwischen 0 und 1, einschließlich.

<percentage>

Ein Prozentwert zwischen 0% und 100%, einschließlich.

Mit 0 oder 0% eingestellt, ist der Stopp vollständig transparent. Mit 1 oder 100% eingestellt, hat das Element die volle Deckkraft des stop-color-Wertes, der möglicherweise teilweise undurchsichtig ist.

Error: could not find syntax for this item

Dieses Beispiel demonstriert die grundlegende Anwendung von stop-opacity und wie die CSS-Eigenschaft stop-opacity das stop-opacity-Attribut übersteuert.

HTML

Wir haben ein SVG mit ein paar <polygon> Sternen und drei <linearGradient> Elementen: jedes hat drei <stop> Elemente, die drei Farbstopps definieren, die einen Verlauf von Blau nach Weiß zu Pink erzeugen; der einzige Unterschied zwischen ihnen ist der id-Wert.

<svg viewBox="0 0 250 120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="myGradient1">
      <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 id="myGradient2">
      <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 id="myGradient3">
      <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 ein stroke und stroke-width hinzu, um die Polygonpfadlinie sichtbar zu machen.

Jedes polygon hat einen Verlaufs-Hintergrund, der mit der fill Eigenschaft gesetzt wird; die id des Verlaufs ist der url() Parameter. Wir setzen magenta als Ersatzfarbe.

Wir definieren die Deckkraft der Stopps jedes Verlaufs mit der stop-opacity Eigenschaft.

Das SVG hat einen gestreiften Hintergrund, um die Transparenzeinstellungen deutlicher 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: #333;
  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 hat eine Deckkraft von 80%, da die Farbstopps leicht durchsichtig sind; der stop-opacity: 0.8; hat den Attributwert stop-opacity="1" überstimmt. Die Füllung des letzten Sterns ist kaum wahrnehmbar mit Farbstopps, die eine Deckkraft von 25% haben. Beachten Sie, dass der Strich in allen Fällen dasselbe undurchsichtige Dunkelgrau ist.

• SVG stop-opacity Attribut
• Präsentationseigenschaften: 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, und vector-effect
• opacity
• background-color
• <color>
• <basic-shape> Datentyp