CODEWITHSUNDEEP
csssvg
H82b1
H82b1

Reputation: 368

Fill opacity of SVG object nested in transparent div

I have a div that has the opacity set to 0.6 to make it a little transparent. Nested in this div, I'm adding lines and shapes using SVG that I want to be opaque. The fiddle shows a simple example:

JSFiddle:

The green circle in the div with the red background is inheriting the opacity of the div with the red background. The green circle below the red div shows it without any transparency - which is how I want to look on the red background.

<div style="width: 160px;height: 140px;background-color: red;opacity: 0.6;">
  <svg width="160" height="140">
    <circle cx="40" cy="40" r="15" fill="green" fill-opacity="1">    </circle>
  </svg>
</div>
<svg width="160" height="140">
  <circle cx="40" cy="40" r="15" fill="green" fill-opacity="1">    </circle>
</svg>

How can I make the green circle nested in the red div opaque?

Upvotes: 1

Views: 3885

Answers (2)

Paul LeBeau
Paul LeBeau

Reputation: 101918

The 0.6 opacity applies to the whole of the div (including it's contents). There is no way for a child element to override the opacity of it's parent.

Your only choice is to move the red background into the SVG.

<div style="width: 160px;height: 140px;">
  <svg width="160" height="140">
      <rect width="100%" height="100%" fill="red" opacity="0.6"/>
    <circle cx="40" cy="40" r="15" fill="green" fill-opacity="1">    </circle>
  </svg>
</div>
<svg width="160" height="140">
  <circle cx="40" cy="40" r="15" fill="green" fill-opacity="1">    </circle>
</svg>

Demo here

Upvotes: 3

G-Cyrillus
G-Cyrillus

Reputation: 106048

You should use rgba(255,0,0,0.6) colors instead to set only background opacity.

The behavior you experiment is normal, opacity applies all the way through the element , childs & text included .

http://jsfiddle.net/vLV5h/7/

Upvotes: 2

Related Questions