【发布时间】：2020-01-06 09:20:04
【问题描述】：
我目前正在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)。
有什么想法吗？
【问题讨论】：
-
您还对形状应用了哪些其他变换？应用变换矩阵时，顺序很重要，即 scale() rotate() translate() !== translate() rotate() scale()。
-
没有对形状应用其他变换。
-
您提到“宽度为 60%，高度为 30%”，即缩放。也许在这里分享您的代码会更容易。
-
我在原始问题中编辑了
组件以反映这是如何完成的。
标签： reactjs react-native svg react-native-android react-native-svg