0

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?

Gumptastic
  • 145
  • 2
  • 8
  • What other transformations are you applying to your shapes? When applying transformation matrices, order matters, i.e. scale() rotate() translate() !== translate() rotate() scale(). – Drew Reese Jan 06 '20 at 09:42
  • No other transformations are being applied to the shapes. – Gumptastic Jan 06 '20 at 09:44
  • You mentioned "width of 60% and height of 30%", that is a scaling. Perhaps it'd be easier to share your code here. – Drew Reese Jan 06 '20 at 09:47
  • I've edited the component in my original question to reflect how this was done. – Gumptastic Jan 06 '20 at 09:50

1 Answers1

2

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.

Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
  • I tinkered around with it, and you were right, it was the `preserveAspectRatio`. I messed with the widths and heights to get it done properly and it worked. Thank you. – Gumptastic Jan 08 '20 at 21:22