CODEWITHSUNDEEP
javascriptsvg
Tech
Tech

Reputation: 65

How to change intersect section color using svg tag

Can you help to change intersect section colour in below image using svg tag.

<svg width="120" height="80">
                <circle cx="50" cy="50" r="25" stroke="white" stroke-width="1" fill="black" fill-opacity="0.6" />
                <circle cx="80" cy="50" r="25" stroke="white" stroke-width="1" fill="black" fill-opacity="0.6" />
            </svg>

Thanks in advance.

Upvotes: 1

Views: 143

Answers (1)

enxaneta
enxaneta

Reputation: 33044

You can create a new shape by clipping a copy of the right circle with the left or vice versa

<svg width="120" height="80">
  <clipPath id="cp">
    <use xlink:href="#l"/>
  </clipPath>
  <g fill-opacity=".6" fill="black">
  <circle id="l" cx="50" cy="50" r="25"  />
  <circle id="r" cx="80" cy="50" r="25" />
  </g>
  
  <use xlink:href="#r" clip-path="url(#cp)" fill="red"/>
</svg>

Upvotes: 3

Related Questions