React native 如何使SVG多边形内的元素居中

我有一个SVG，它由多个多边形组合而成。 我试图将图像/按钮放在多边形中心内，但无论我做什么尝试，它总是将图像放在屏幕的

x=0和y=0

中

<Svg width="546px" height="794px" viewBox="0 0 546 794" version="1.1" >
    <G id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <G id="item0" transform="translate(1.000000, 1.000000)" fill="#EDAF51" fill-rule="nonzero" stroke="#720D00">
            <Polygon id="RX-03" points="206.65269...">
            </Polygon>
            <Circle x="0" y="0" cx="40" cy="40" r="15" fill="black" />              
        </G>

有了这个，我得到：

---

但如果我将

放入任何SVG形状，可以通过几种方式将图像插入其中：

使用
clipPath
使用
mask
使用
模式
使用任何插入图像的方法，都需要关注模板的形状

如果模板具有对称形状，则需要选择具有相同纵横比的原始图像

换句话说，如果裁剪图案是圆形或正多边形，则需要选择具有相同宽度和高度的图像

我将React语法转换为常规SVG语法。如果有必要，你可以回去

所选圆形图像
徽章


将此图像插入六边形`

1.使用
clipPath
六边形用作裁剪图案



.集装箱{
宽度：50%；
身高：50%；
}
关于问题作者评论的新答案

在
svg
中，元素之间相互定位，只有绝对定位。

svg中的相对定位，如您所愿-相对于父多边形没有圆。
只有对圆进行绝对定位才有助于将其放置在正确的位置
您可以在定位时创建一个圆并将其克隆几次：




您好，请检查我的更新。我认为问题在于如何设置原点，使多边形的子对象相对于该多边形。我解释了这个问题。@1110嗨，在
svg
中，元素之间相互定位，只有绝对定位。svg中的相对定位，如您所愿-相对于父多边形没有圆。只有对一个圆进行绝对定位才能将其放置在正确的位置。定位时，您可以创建一个圆并将其克隆几次。您想让我给出一个新的答案吗？如果我理解正确，那么我不能将圆放置在一个多边形中，并使圆相对于它？@1110是的，您不能。只有绝对定位。就像我的新答案一样。但在我的例子中，这很容易做到一次。但是这种布局永远不会被打破，并且可以适应任何小工具