fill-opacity

Die Werte <number> und <percentage> geben die Deckkraft des fill des Elements an.

<number>

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

<percentage>

Ein prozentualer Wert zwischen 0% und 100%, einschließlich.

Mit 0 oder 0% ist das Element vollständig transparent. Mit 1 oder 100% ist das Element vollständig undurchsichtig. Mit Werten dazwischen ist das Element halbtransparent, wobei der Inhalt hinter dem Element sichtbar wird.

fill-opacity = 
  <'opacity'>  

<opacity> = 
  <opacity-value>  

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

Dieses Beispiel demonstriert den grundlegenden Anwendungsfall von fill-opacity und wie die CSS-Eigenschaft fill-opacity den Vorrang gegenüber dem fill-opacity-Attribut hat und keinen Einfluss auf einen angewendeten stroke eines Objekts hat.

HTML

Wir fügen mehrere unterschiedliche SVG-Graphikelemente ein und setzen das fill-opacity-Attribut jedes einzelnen auf 1 (außer line), was bedeutet, dass das Füllung jedes Elements undurchsichtig ist. Das fill-opacity SVG-Attribut gilt nicht für <line>.

<svg viewBox="0 0 100 150" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="30" height="30" fill-opacity="1" />
  <rect x="60" y="10" rx="10" ry="10" width="30" height="30" fill-opacity="1" />
  <circle cx="25" cy="75" r="20" fill-opacity="1" />
  <ellipse cx="75" cy="75" rx="20" ry="10" fill-opacity="1" />
  <line x1="50" x2="90" y1="40" y2="60" stroke="black" stroke-width="5" />
  <polyline
    points="60 90 65 100 70 95 75 110 80 105 85 120 90 115 95 130 100 125"
    fill-opacity="1" />
  <path d="M20,130 Q40,105 50,130 T90,130" fill-opacity="1" />
</svg>

CSS

Mit CSS nutzen wir die fill-opacity-Eigenschaft, um den Wert des SVG-Attributs fill-opacity zu überschreiben, wobei wir jedem SVG-Element einen anderen Wert zuweisen.

Wir fügen einem Kreis und einer Ellipse einen stroke hinzu, um zu demonstrieren, dass die Deckkraft des Umrisses nicht durch die fill-opacity-Eigenschaft beeinflusst wird.

Weitere SVG-Stile sind gesetzt, einschließlich eines Hintergrundbildes, um die Deckkraft jedes Elements leichter sichtbar zu machen. Diese werden aus Gründen der Kürze nicht gezeigt.

svg {
  border: 1px solid;
  height: calc(100vh - 20px);
  background: repeating-linear-gradient(
    to bottom right,
    transparent 0 10px,
    #ccc 10px 11px
  );
}

svg > * {
  fill: black;
}
rect:last-of-type {
  fill-opacity: 0.1;
}
circle {
  fill-opacity: 0.6;
}
ellipse {
  fill-opacity: 40%;
}
line {
  fill-opacity: 10%;
}
polyline {
  fill-opacity: 50%;
}
path {
  fill-opacity: 0.5;
}

circle,
ellipse {
  stroke: black;
  stroke-width: 3px;
}

Ergebnisse

Nur zwei Elemente sind vollständig undurchsichtig: das erste Rechteck und die Linie. Das erste Rechteck wird von keinem der Selektoren getroffen, es wird also kein CSS angewendet und das fill ist vollständig undurchsichtig. Die line wird getroffen, mit fill-opacity: 10% gesetzt. Da die Linie jedoch keine fill-Malmethode hat — nur der stroke ist sichtbar — hat die Deklaration keinen Effekt.

• SVG fill-opacity Attribut
• Präsentationseigenschaften: fill-opacity, clip-rule, color-interpolation-filters, fill-rule, fill, marker-end, marker-mid, marker-start, shape-rendering, stop-color, stop-opacity, 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