0

我目前正在制作一个应用程序react-native并react-native-svg用于渲染形状，即矩形、椭圆等。

我将这些形状包含在宽度与高度比为 2:1 的 SVG 容器组件中：

  • 形状的宽度是容器宽度的百分比。
  • 形状的高度是容器高度的百分比。

我目前遇到了一个我无法解决的问题。每次我旋转一个形状时，它都会以奇怪的方式扭曲和扭曲。

这是一个旋转 0 度、宽度为 60%、高度为 30% 的矩形：

在此处输入图像描述

这是同一个矩形，旋转了 71 度（宽度和高度与之前相同）：

在此处输入图像描述

我将矩形封装在 SVG 组件中，如下所示： <Svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">

我试图修改preserveAspectRatio组件的道具，但任何使用它的选择似乎都会扭曲形状的宽度和高度。

我所有的 SVG 形状组件都使用大致相同的格式：

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

我已经对其进行了编程，以使rotate()字符串产生，例如：rotate(71, 30, 55).

有任何想法吗？

4

1 回答 1

2

问题是preserveAspectRatio="none". 它告诉浏览器拉伸 SVG 以适应您指定的宽度和高度。

SVG的viewBox长宽比为正方形（宽度和高度均为 100）。但看起来 SVG 的父容器没有。所以你的 SVG 被水平拉伸以适应。

删除preserveAspectRatio="none"，它将不再拉伸/变形。

于 2020-01-06T18:46:33.897 回答