图像上的 React Native svg 剪辑路径不起作用

Question

尝试使用 svg ClipPath 剪辑 Image 组件被证明是有问题的。我可以剪辑 Rect 没问题，但是当我用 Image 替换 Rect 时，什么也没有显示。

octogon.points = "80,0.3 23.6,23.6 0.3,80 23.6,136.4 80,159.7 136.4,136.4 159.7,80 136.4,2 3.6";

props.photoUri = "file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540anonymous%252Fhalt-c46ef35c-1897-441e-840e-28147c0de5a9/ImagePicker/d68a7ddd-807e-4d26-95c2-bd47ddca803e.jpg"

<View style={styles.container}>
    <Svg width={160} height={160} viewBox={`0 0 160 160`}>
        <Defs>
            <ClipPath id="clip">
                <Polygon points={octogon.points} />
            </ClipPath>
        </Defs>
        {/* <Rect x="0" y="0" width="160" height="160" fill="red" clipPath="#clip" /> */}
        <Image x="0" y="0" width="160" height="160" source={{ uri: props.photoUri }} clipPath="#clip" />
    </Svg>
</View>

注释掉的 Rect 按预期工作并创建了一个红色的八边形。图像返回空白。

我觉得我忽略了一些简单的事情。任何帮助表示赞赏。

Answer 1

回答我自己的问题，因为我是个白痴，希望它会在将来对某人有所帮助。请注意您要导入的组件。我使用的Image是“react-native”而不是Image“react-native-svg”。

一旦我将其交换并更改source={{ uri: props.photoUri }}为href={{ uri: props.photoUri }}，它就开始工作。