如何使用 react-native-svg 在旋转形状上防止 warping/skewing？
How can I prevent warping/skewing on a rotated shape with react-native-svg?
我目前正在 react-native 中制作应用程序并使用 react-native-svg 渲染形状，即矩形、椭圆形等
我将这些形状包含在 SVG 容器组件中，宽高比为 2:1:
- 形状的宽度是容器宽度的百分比。
- 形状的高度是容器高度的百分比。
我目前遇到了一个我无法解决的问题。 每次我旋转形状时，它都会以奇怪的方式扭曲和扭曲。
这是一个旋转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).
有什么想法吗？
问题是preserveAspectRatio="none"。它告诉浏览器拉伸 SVG 以适应您指定的宽度和高度。
SVG的viewBox长宽比为正方形（宽高均为100）。但看起来 SVG 的父容器没有。所以你的 SVG 被水平拉伸以适应。
删除preserveAspectRatio="none"，它将不再stretch/warp。
我目前正在 react-native 中制作应用程序并使用 react-native-svg 渲染形状，即矩形、椭圆形等
我将这些形状包含在 SVG 容器组件中，宽高比为 2:1:
- 形状的宽度是容器宽度的百分比。
- 形状的高度是容器高度的百分比。
我目前遇到了一个我无法解决的问题。 每次我旋转形状时，它都会以奇怪的方式扭曲和扭曲。
这是一个旋转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).
有什么想法吗？
问题是preserveAspectRatio="none"。它告诉浏览器拉伸 SVG 以适应您指定的宽度和高度。
SVG的viewBox长宽比为正方形（宽高均为100）。但看起来 SVG 的父容器没有。所以你的 SVG 被水平拉伸以适应。
删除preserveAspectRatio="none"，它将不再stretch/warp。