В настоящее время я делаю заявку в react-native и использую react-native-svg для рендеринга в фигурах, то есть прямоугольниках, эллипсах и т. Д. c.
Я храню эти фигуры в Компонент контейнера 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 + ")" } />
I ' мы запрограммировали его так, чтобы строка rotate() приводила, например: rotate(71, 30, 55).
Есть идеи?