This example demonstrates the basic use case of fill-opacity, and how the CSS fill-opacity property takes precedence over the fill-opacity attribute and has no effect on any stroke applied to a shape.
HTML
We include several different SVG graphic elements and set the fill-opacity attribute of each one to 1 (except line), meaning the fill of each element is opaque. The fill-opacity SVG attribute does not apply to <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
With CSS, we use the fill-opacity property to override the value of the SVG fill-opacity attribute, giving each SVG element a different value.
We add a stroke to the circle and ellipse, to demonstrate that the opacity of the stroke is not impacted by the fill-opacity property.
Other SVG styles are set, including a background image to allow the opacity of each element to be more easily seen. These are not shown for the sake of brevity.
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;
}
Results
Only two elements are fully opaque: the first rectangle and the line. The first rectangle is not matched by any of the selectors, therefore no CSS is applied and the fill is fully opaque. The line is matched, with fill-opacity: 10% set. However, the line has no fill paint operation — only the stroke is visible — therefore the declaration has no effect.