CODEWITHSUNDEEP
htmlcsssvg
imv
imv

Reputation: 446

Prevent two HTML5 SVGs that are superposed from getting its color darker

I'm trying to make various svg ellipses, with some transparency, but when they touch in the edges, the color gets darker, is there a way for prevent this behaviour happening, for example by making that part that overlaps of the svg not transparent, or any other solution out of the box?

enter image description here

Upvotes: 0

Views: 324

Answers (2)

Michael Mullany
Michael Mullany

Reputation: 31715

You can adjust the opacity of the overlapping areas by using a filter. The tableValues below converts anything with an opacity between .2 and .9 back to 0.4.

<svg width="800px" height="600px">
  <defs>
    <filter id="constant-opacity" color-interpolation-filters="sRGB">
      <feComponentTransfer>
        <feFuncA type="table" tableValues="0 .1 .4 .4 .4 .4 .4 .4 .4 .9 1"/>
      </feComponentTransfer>
    </filter>
  </defs>
  <g filter="url(#constant-opacity)">
  <circle cx="100"cy ="100" r="80" fill="red" fill-opacity=".4"/>
  <circle cx="220"cy ="100" r="80" fill="blue" fill-opacity=".4"/>
  <circle cx="340"cy ="100" r="80" fill="green" fill-opacity=".4"/>
  </g>
</svg>

Upvotes: 1

Paul LeBeau
Paul LeBeau

Reputation: 101820

Instead of superimposing partially transparent circles, superimpose solid-colour circles, then make the group of them transparent together.

<svg viewBox="0 0 300 150">
  <rect x="50" y="30" width="180" height="100" fill="none" stroke="black" stroke-width="6"/>
  <g opacity="0.5">
    <circle cx="50" cy="50" r="50" fill="red"/>
    <circle cx="140" cy="50" r="50" fill="purple"/>
    <circle cx="230" cy="50" r="50" fill="blue"/>
  </g>
</svg>

Upvotes: 3

Related Questions