svg points 8个属性值代表啥？

Posted 2023-05-15

points: [20, 10, 10, 40, 50, 25, 10, 10]

参考技术A 应该是 [20, 10 10, 40 50, 25 10, 10]，两个数字为一组，代表一个点的x，y坐标 参考技术B

points=" x1坐标,y1坐标,x2坐标,y2坐标 ,x3坐标,y3坐标,x4坐标,y4坐标"

<polygon> 标签用来创建含有不少于三个边的图形。

多边形是由直线组成，其形状是"封闭"的（所有的线条 连接起来）。

由这4个点构成的图像

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

【中文标题】图像上的 React Native svg 剪辑路径不起作用

【英文标题】：React Native svg clip path on image not working

【发布时间】：2019-07-25 01:56:58

【问题描述】：

尝试使用 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"   fill="red" clipPath="#clip" /> */
        <Image x="0" y="0"   source= uri: props.photoUri  clipPath="#clip" />
    </Svg>
</View>

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

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

【问题讨论】：

缩小宽度和高度是一样的吗？

【参考方案1】：

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

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