react-native-svg - Fill overlapped area of two ellipses-CodePudding

We are using

Our requirement is to fill up the area which gets overlapped by two ellipses.

If anyone can put some light on it, how can it be achieved using the SVG library for react-native? or if anything else we have will be very helpful

Thanks.

CodePudding user response：

The main idea is creating a clipPath with one of the ellipses and reusing the other one clipped by the clipPath.

Please observe that I am giving an id to both ellipses so that I can reuse them with use.

<svg fill="none" viewBox="140 100 170 170" width="200">
  
      <ellipse cx="192" cy="190" rx="50" ry="80" stroke="red" strokeWidth="2" id="a"/>
      <ellipse cx="250" cy="150" rx="60" ry="30" stroke="green" strokeWidth="2" id="b"/>
  
  <use xlink:href="#a" clip-path="url(#cp)" fill="gold"/>
  
  <clipPath id="cp">
    <use xlink:href="#b"/>
  </clipPath>
  
<svg>