react-native-svg

Question

我们正在使用 react-native-svg 库来绘制具有以下代码的椭圆

<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>

看起来像下图

我们的要求是填满两个椭圆重叠的区域

如果有人能阐明它，如何使用 SVG 库来实现 react-native？或者如果我们有任何其他东西会很有帮助

谢谢。

Answer 1

主要思想是使用其中一个椭圆创建一个 clipPath，并重新使用被 clipPath 剪裁的另一个。

请注意，我为两个省略号指定了一个 id，以便我可以重复使用它们。

<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>

react-native-svg - 填充两个椭圆的重叠区域

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

svg

reactjs

react-native