Reactjs 如何使用本机svg防止旋转形状上的扭曲/倾斜？

我目前正在

react native

中制作一个应用程序，并使用

react native svg

以图形（即矩形、椭圆等）进行渲染

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

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

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

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

这里是旋转71度的同一矩形（宽度和高度与前面相同）：

我将矩形封装在SVG组件中，如下所示：

我试图修补组件的

preserveSpectratio

道具，但使用它进行的任何选择似乎都会扭曲形状的宽度和高度

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

我对它进行了编程，使

rotate（）

字符串产生如下结果，例如：

rotate（71,30,55）

---

有什么想法吗？

问题在于

保留aspectratio=“无”

。它告诉浏览器拉伸SVG以适应指定的宽度和高度

SVG的

viewBox

具有方形纵横比（宽度和高度均为100）。但SVG的父容器似乎没有。因此，您的SVG将被水平拉伸以适应

---

移除

preserveSpectratio=“none”

，它将不再拉伸/扭曲。

问题在于

preserveSpectratio=“none”

。它告诉浏览器拉伸SVG以适应指定的宽度和高度

SVG的

viewBox

具有方形纵横比（宽度和高度均为100）。但SVG的父容器似乎没有。因此，您的SVG将被水平拉伸以适应

---

删除

preserveAspectRatio=“none”

，它将不再拉伸/扭曲。

您将对形状应用哪些其他变换？应用变换矩阵时，顺序很重要，即scale（）rotate（）translate（）！==translate（）rotate（）scale（）。没有其他变换应用于形状。您提到“宽度为60%，高度为30%”，这是一种缩放。也许在这里共享您的代码会更容易。我在最初的问题中编辑了该组件，以反映这是如何完成的。您对形状应用了哪些其他转换？应用变换矩阵时，顺序很重要，即scale（）rotate（）translate（）！==translate（）rotate（）scale（）。没有其他变换应用于形状。您提到“宽度为60%，高度为30%”，这是一种缩放。也许在这里共享您的代码会更容易。我在最初的问题中编辑了该组件，以反映这是如何完成的。我对其进行了修改，您是对的，这是

preserveSpectratio

。我弄乱了宽度和高度，使它做得很好，它的工作。谢谢。我对它进行了修改，你是对的，它是

保存的Aspectratio

。我弄乱了宽度和高度，使它做得很好，它的工作。非常感谢。

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