Search code examples
reactjssvgreact-nativereact-native-svg

How can I prevent warping/skewing on a rotated shape with react-native-svg?

I'm currently making an application in react-native and using react-native-svg to render in shapes, i.e. rectangles, ellipses, etc.

I'm containing these shapes in an SVG container component with a width to height ratio of 2:1:

  • The width of the shape is a percentage of the width of the container.
  • The height of the shape is a percentage of the height of the container.

I'm currently encountering an issue that I haven't been able to resolve. Every time I rotate a shape, it distorts and warps in odd ways.

Here is a rectangle with 0 degree rotation and width of 60% and height of 30%:

enter image description here

And here is the same rectangle with a 71 degree rotation (width and height are the same as previous):

enter image description here

I have the rectangles enveloped in an SVG component as such: <Svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">

I attempted to tinker with the preserveAspectRatio prop of the component but any selection with it seems to distort the widths and heights of the shapes.

All my SVG shape components use approximately the same format:

<Rect ... width={ attributes.width } height={ attributes.height } transform={ "rotate(" + attributes.rotation + " " + attributes.x + " " + attributes.y + ")" } />

I've programmed it in such a way that the rotate() string results in, for example: rotate(71, 30, 55).

Any ideas?

Solution

  • The problem is the preserveAspectRatio="none". It tells the browser to stretch the SVG to fit the width and height that you have specified.

    The viewBox of the SVG has a square aspect ratio (the width and height are both 100). But it looks like the parent container of the SVG does not. So your SVG is being stretched horizontally to fit.

    Remove the preserveAspectRatio="none", and it will no longer stretch/warp.