在本机反应中隐藏重叠svg的背景答案

【问题标题】：hide the background from overlapping svgs in react native在本机反应中隐藏重叠svg的背景
【发布时间】：2019-12-31 06:48:48
【问题描述】：

我正在尝试创建两个相互重叠的圆圈的形状，我已经成功完成，只是重叠部分显示背景图像而不是设置在圆圈内的图像，并且在 react-native-svg 区域中非常新，所以请帮忙我。这是我的代码：

<ImageBackground source={require('../assets/images/20.png')} style={styles.background}>
    <Svg height={height} width="100%">
        <Defs>
            <ClipPath id="clip">
                <Circle cx="320" cy="230" r="250" />
                <Circle cx="80" cy="150" r="180" />
            </ClipPath>
        </Defs>
        <SvgImg
            href={require('../assets/images/18.jpg')}
            width={500}
            height={500}
            preserveAspectRatio="xMidYMid slice"
            clipPath="url(#clip)"
        />
    </Svg>
</ImageBackground>


const styles = StyleSheet.create({
    background: {
        width: 'auto',
        height: '100%',
    },
})

【问题讨论】：

标签： react-native svg react-native-svg

【解决方案1】：

这是 ImageBackground 中的常见问题

因为内部图像也需要定义样式

尝试设置 imageStyle

 <ImageBackground
    imageStyle={{
      resizeMode: 'contain',//or try anohter style
      overflow: 'visible',
   }}
  >

【讨论】：

尝试另一种风格？
版本是什么？
react-native-svg 库版本 10