如何在SVG组内居中嵌套的SVG图标（D3转盘场景）

需求：将金色图标居中放置在黑色轮缘内部，避免使用绝对定位防止后续布局问题。

问题分析 #

你当前的代码已经通过arc.centroid获取了每个轮缘区域的中心坐标，但直接将G元素定位到(x,y)时，图标是以左上角为锚点对齐的，所以无法实现居中。需要对图标进行反向偏移，抵消自身尺寸的一半，让图标中心与区域中心重合。

解决方案 #

1. 确定图标尺寸：确保你的Icon组件能提供自身的宽高（可以通过props传递，或者给Icon设置固定尺寸）
2. 调整定位偏移：在x和y的基础上，分别减去图标宽度的一半和高度的一半
3. 修正语法错误：原代码中</G缺少闭合符号>，需要补上

修改后的代码 #

<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;
                    // 假设图标尺寸为40x40，可根据实际情况调整或通过props传入
                    const iconWidth = 40;
                    const iconHeight = 40;

                    return (
                        <G key={`arc-${i}`}>
                            <Path d={arc.path} fill={colors.color1} />
                            <G origin={`${x}, ${y}`}>
                                {/* 减去图标宽高的一半，让中心对齐 */}
                                <G x={x - iconWidth / 2} y={y - iconHeight / 2}>
                                    <Icon width={iconWidth} height={iconHeight} />
                                </G>
                            </G>
                        </G>
                    );
                })}
            </G>
        </Svg>
    </View>
</LinearGradient>

关键说明 #

• 如果你的Icon组件尺寸不固定，可以通过ref获取实际渲染后的尺寸，或者在spinWheelPrizes中存储每个图标的宽高信息
• 使用x={x - iconWidth/2}和y={y - iconHeight/2}实现图标中心与轮缘区域中心对齐，完全基于SVG的坐标系统，不会引入绝对定位的布局问题
• 保留了原代码中的origin设置，确保图标旋转时以区域中心为轴（如果有旋转需求的话）

内容的提问来源于stack exchange，提问作者NextZuck