React native 反应本机SVG掩码子项不转换

我在一张可缩放的图片上画了两个圆圈。我希望圆是孔视图，以便孔高亮显示其后面的图像。所以我用一个遮罩来画矩形，使图像变暗，然后用圆圈来突出部分图像。我将遮罩和矩形组合在一起，并对遮罩进行变换。当图像没有放大时，一切都是完美的。当我放大并平移图像时，圆圈停留在它们应该停留的位置，但背景矩形不会从变换中平移

<Svg
    height={imageDetails.HEIGHT}
    width={imageDetails.WIDTH}
    pointerEvents='none'>
    <G transform={{
        translateX: delta.x,
        translateY: delta.y,
        scale: delta.zoom
    }}  >
        <Defs>
            <Mask id={`clip`} >
                <Rect fill="#fff" strokeWidth='5' stroke='white'
                    originX={delta.x * delta.zoom}
                    width={imageDetails.WIDTH * delta.zoom} height={imageDetails.HEIGHT} />
                {data.map(item =>
                    <Circle r={item.size} cx={item.x} cy={item.y} key={item.key} fill='#000' />
                )}
            </Mask>
        </Defs>
        <Rect width={imageDetails.WIDTH} height={imageDetails.HEIGHT} clipRule={'evenodd'}
            fillRule={'nonzero'} stroke='blue' strokeWidth='2' vectorEffect='inherit'
            fill="rgba(0,0,0,.5)" fillOpacity='.7' mask={`url(#clip)`} />
    </G>
</Svg>

{data.map（项=>
)}

我试着改变面具和里面的矩形，但是什么都没有

这里是我的屏幕截图，显示了完整的图像，然后放大，甚至放大

---

所以我对SVG的了解有限，但我正在学习。我认为正在发生的是，转换正在应用于所有内容，但蒙面矩形的宽度和高度设置为一个值。在进行缩放时，宽度和高度保持完全相同，这就是为什么要将其截断。我必须改变它，以便将变换应用于遮罩圆圈。因此，掩码矩形将始终填充整个屏幕，圆圈将接受转换。希望这能帮助任何面临这个问题的人

<Svg
    height={imageDetails.HEIGHT}
    width={imageDetails.WIDTH}
    pointerEvents='none'>
    <G   >
        <Defs>
            <Mask id={`clip`} >
                <Rect fill="#fff" width='100%' height='100%' />
                {data.map(item =>
                    <Circle 
                        transform={{
                            translateX: delta.x,
                            translateY: delta.y,
                            scale: delta.zoom
                        }}
                        r={item.size} cx={item.x} cy={item.y} key={item.key} fill='#000' />
                )}
            </Mask>
        </Defs>
        <Rect width='100%' height='100%' 
            fill="rgba(0,0,0,.5)" fillOpacity='.7' mask={`url(#clip)`} />
</Svg>

{data.map（项=>
)}