javascript - 如何根据其中心而不是 React Native 的起点旋转 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 位于 Map Marker 内:(这在我的示例中无济于事，上面的代码必须足够)

<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 .. 但旋转是基于图标的起点，而不是它的中心
为什么我有问题？这是因为我的 View 是一个正方形(我看到这是因为我在那里设置了 backgroudnColor )，例如当我的 svg 旋转 90 度时，它从 View 中消失，我不知道为什么它的一部分开始消失(看起来像css中的溢出隐藏效果)
任何帮助将不胜感激。

Answer 1

SVG-rotate 转换采用三个参数，其中最后两个表示旋转中心。如果省略，则假定原点。 See here .
所以你需要提供你的 svg 的中心坐标。
要获得任何给定 svg 的中心，您可以使用 getBBox-method , 得到它的 x、y、宽度和高度。有了这些信息，您可以计算这两个点，例如:const [xP, yP] = [Math.trunc(x + width * 0.5), Math.trunc(y + height * 0.5)]; 编辑 :我不确定 react native 是否支持 getBBox!