如何在React Native中基于svg的中心而不是起点旋转svg

Question

我遇到了一个小问题，我希望能在这里得到一些帮助！

我有一个像这样的Picto图标：

const PictoIcon = ({ color, size }) => (
<StyledSvg xmlns="http://www.w3.org/2000/svg" size={size} viewBox="0 0 24 24">
<Path fill={color} d="M12,2L4.5,20.3L5.2,21l6.8-3l6.8,3l0.7-0.7L12,2z" transform="rotate(45)" />
</StyledSvg>
);

Picto在地图标记内：(在我的例子中，这没有帮助，上面的代码必须足够(

<Marker
style={isAndroid ? rotation : {}}
tracksViewChanges={showPicto}
key={id}
onPress={handleOnClickMark(marker)}
coordinate={coordinate}
identifier={id}
>
{showPicto && <View style={{backgroundColor: 'red'}}><PictoIcon size={30} color={color}/></View>}
{!showPicto && (isPoint ? <PointWrapper /> : <MarkerIcon size={50} color={color} />)}
</Marker>

我需要我的标记基于cap变量进行旋转，但它在IOS中做得不好，所以我希望在IOS中旋转SVG。。但旋转是基于图标的起点，而不是其中心

为什么我有问题？这是因为我的视图是一个正方形(我看到这一点是因为我在那里设置了backgroundnColor(，例如，当我的svg旋转90度时，它就会从视图中消失，我不知道为什么它的一部分开始失效(看起来像css中的溢出隐藏效果(

任何帮助都将不胜感激。

Answer 1

SVG旋转转换有三个参数，其中最后两个表示旋转中心。如果省略，则假定原点。请参见此处。

因此，您需要提供svg的中心坐标。

要获得任何给定svg的中心，你可以使用getBBox方法，获得它的x，y，宽度和高度。有了这些信息，你可以计算这两点，例如：

const [xP, yP] = [Math.trunc(x + width * 0.5), Math.trunc(y + height * 0.5)];

编辑：我不确定react native是否支持getBBox！