如何将 SVG 置于另一个 SVG 组的中心

Question

我的目标是将金色图标置于黑色边缘的中心。

下面是我的代码，它循环使用 d3 创建的弧，并且嵌套在 SVG 组中的图标组件是我试图将中心定位在黑暗边缘的组件。图标本身是一个 SVG。我不想绝对定位图标，因为我觉得这可能会导致稍后的布局问题。

      <LinearGradient
          start={{ x: 0.25, y: 0 }}
          style={styles.wheelGradient}
          colors={gradients.borderGradient}>

          <View style={styles.wheelWrapper}>
            <Svg
              width={rimSize}
              height={rimSize}
              viewBox={`0 0 ${screenWidth} ${screenWidth}`}
              style={{ transform: [{ rotate: `-${angleOffset}deg`}]}}>

              <G y={screenWidth / 2} x={screenWidth / 2}>
                {_rimPaths.map((arc, i) => {
                  const [x, y] = arc.centroid;

                  const Icon = spinWheelPrizes[i].icon;

                  return (
                    <G key={`arc-${i}`}>
                      <Path d={arc.path} fill={colors.color1} />
                      <G origin={`${x}, ${y}`}>
                        <G x={x} y={y}>
                          <Icon />
                        </G
                      </G>
                    </G>
                  );
                })}
              </G>
            </Svg>
          </View>
        </LinearGradient>

Answer 1

您可以使用变换来定位它们。不要使用绝对定位，而是尝试使用“平移”转换来调整图标在边缘内的位置。我附上一个片段供您参考。

“transform”属性将图标组移动到质心坐标（x，y）。组件中的 x 和 y 属性有助于将图标精确地放置在黑边的中心。调整 iconWidth 和 iconHeight 值以匹配图标的尺寸

<G key={`arc-${i}`}>

  <Path d={arc.path} fill={colors.color1} />

  <G transform={`translate(${x}, ${y})`}> {/* Apply translation */}
  
    {/* Adjust for the icon's size and position it at the center */}
    <Icon 
      width={iconWidth} 
      height={iconHeight} 
      x={-iconWidth / 2} // Offset by half the icon's width
      y={-iconHeight / 2} // Offset by half the icon's height
    />
  
  </G>

</G>