reactjsreact-nativesvgreact-native-svg

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

We are using react-native-svg library to draw ellipses having following code

<Svg>
      <Ellipse cx={192} cy={190} rx={50} ry={80} stroke={"red"} strokeWidth="2"/>
      <Ellipse cx={250} cy={150} rx={60} ry={30} stroke={"green"} strokeWidth="2"/>
<Svg>

Which looks like the image below

enter image description here

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.

Solution

  • 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 101 170 170" width="200">
  
      <ellipse cx="192" cy="190" rx="50" ry="80" stroke="red"
         stroke-width="2" id="a"/>
      <ellipse cx="250" cy="150" rx="60" ry="30" stroke="green" 
        stroke-wdth="2" id="b"/>
  
  <use xlink:href="#a" clip-path="url(#cp)" fill="gold"/>
  
  <clipPath id="cp">
    <use xlink:href="#b"/>
  </clipPath>
  
<svg>