如何根据中心而不是 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 在地图标记内:(这对我的示例没有帮助，上面的代码已经足够了）

<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 度时，它从视图中消失了，我不知道为什么它的一部分开始消失（看起来像 css 中的溢出隐藏效果）

如有任何帮助，我们将不胜感激。

Answer 1

SVG 旋转变换采用三个参数，其中最后两个表示旋转中心。如果省略，则假定原点。 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！

如何根据中心而不是 React Native 的起点旋转 svg？

How to rotate a svg based on its center not its starting point in React Native?

javascript

svg

rotation