我们具有以下SVG形状：

Shark Fin Shape

我们将其放在带有圆角（带有react-native-svg的“剪切路径” Rect）的RN组件中，如下所示：

import React from 'react';
import {StyleSheet}  from 'react-native';
import {Path,Svg,Rect,Defs,ClipPath} from 'react-native-svg';

const Sharkfinshape = (props) => {

  const sharkfinshape = 'M260.8,158.7c-50.2,0-98.5-103.7-142-103.7-17.4,19.7,103.7-40.7,103.7H0V0H260.8Z';

  const style = StyleSheet.create({
    svg: {
      borderRadius: 15,backgroundColor: "orange"
    }
  });

  return (
    <Svg viewBox="0 0 260 150" style={style.svg}>
      <Defs>
        <ClipPath id="rect-with-round-corners-clip">
          <Rect x="0" y="0" width="260" height="150" rx="15" />          
        </ClipPath>
      </Defs>
      <Path fill="red" d={sharkfinshape} clipPath="url(#rect-with-round-corners-clip)" />
    </Svg>
  );
};

export default Sharkfinshape;

结果：

我们需要此表单填充SVG的整个区域，但是当放置preserveAspectRatio时，这会使“剪切路径”圆角变形：

<Svg preserveAspectRatio="none" viewBox="0 0 260 150" style={style.svg}>
   <Defs>
     <ClipPath id="rect-with-round-corners-clip">
       <Rect x="0" y="0" width="260" height="150" rx="15" />          
     </ClipPath>
   </Defs>
   <Path fill="red" d={sharkfinshape} clipPath="url(#rect-with-round-corners-clip)" />
</Svg>

这就像他也弄平了“剪切路径”一样。我们知道所有内容都在SVG内部，但是有什么方法可以保留“剪切路径”方面的内容？

还有另一种方法吗？