5

尝试使用 svg ClipPath 剪辑 Image 组件被证明是有问题的。我可以剪辑 Rect 没问题，但是当我用图像替换 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 按预期工作并创建一个红色八角形。图像返回空白。

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

4

1 回答 1

6

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

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

于 2019-07-25T05:34:06.987 回答