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

Question

I am facing a little problem, I wish I can get some help here!

I have a Picto Icon like this :

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>
);

The Picto is inside a Map Marker : ( this won't help in my example, thje code above has to be enough )

<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>

I need my marker to be rotated based on the cap variable, but it is not doing good in IOS, so I want that in IOS I rotate the SVG .. But the rotation is based on the starting point of the icon, not its center

Why I am having a problem ? it because my View is a square ( I see that because the backgroudnColor I set there ), and when my svg is rotated by 90 degree for example, it comes off the view, and I don't know why part of it start disappering ( looks like overflow hidden effect in css )

Any help would be mucch appreciated.

try this : https://stackoverflow.com/questions/15138801/rotate-rectangle-around-its-own-center-in-svg — ATP, Dec 08 '20 at 15:21
and that was css, not RN styles, they are similar but not that much when it comes to details ! — TaouBen, Dec 08 '20 at 15:22

score 2 · Accepted Answer · answered Dec 08 '20 at 15:29

The SVG-rotate transformation takes three arguments, of which the last two signify the center of rotation. If omitted, the origin is assumed. See here.

So you need to provide the center-coordinates of your svg as those.

To get the center of any given svg you can use the getBBox-method, to get x, y, width and height of it. With that information you can calculate those two points, for example like so:

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

Edit: I'm not sure if react native supports getBBox!

Yup, Thank you, that was my solution based on this since my icon size is 30x30 : transform={!ramdaIsNilOrEmpty(cap) ? `rotate(${cap}, 15, 15)" : ""} — TaouBen, Dec 08 '20 at 15:41

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

1 Answers1