Как найти правильные значения ширины, высоты и viewBox с помощью реакции-native-svg ⇐ CSS

[Anonymous]

Я пытаюсь сделать что-то, что кажется простым, но пытаюсь уже несколько часов и не могу найти решение.

У меня есть SVG, который должен быть поверх экрана. От дизайнера пришли такие размеры:

Код: Выделить всё

...

В React Native это будет внутри контейнера, а SVG должен занять всю ширину экрана, что я и делаю. взято с:

Код: Выделить всё

Dimensions.get("window").width

Моя проблема в том, что я не нашел способа масштабировать SVG, чтобы он занимал 100% ширины экрана, выяснив правильную высоту (или способ ее получения). устанавливается автоматически) и сохраняет соотношение сторон. Я пробовал около миллиона вещей, в том числе экспериментировал со стилем aspectRatio контейнера и его высотой (или вообще не устанавливал высоту). . Всякий раз, когда я находил какие-то «пропорции», которые работали, я пробовал использовать другое устройство с другой шириной экрана, и это выглядело совсем не очень хорошо (обрезано, меньше ширины экрана и т. д.).

Мне кажется, что свойство preserveAspectRatio в SVG (react-native-svg) каким-то образом конфликтует с aspectRatio стиль. И я совершенно запутался с preserveAspectRatio, я не нашел способа масштабировать его без обрезки.

У кого-нибудь есть идея, как этого добиться?

Это мой окончательный код, который возвращает компонент HeatMap, показывающий SVG, но, хотя он имеет правильную высоту, часть SVG отсутствует экрана справа (выглядит обрезанным, потому что он слишком широкий):

Код: Выделить всё

const windowWidth = Dimensions.get("window").width;

const getSVGRootProps = ({ width, height }) => ({
width: "100%",
height: "100%",
viewBox: `0 0 ${width} ${height}`,
preserveAspectRatio: "xMinYMin meet",
});

const FieldShape = () => {
const width = 354; // Original width
const height = 190; // Original height
const aspectRatio = width / height;
// adjusted height =  * original height / original width
const calculatedHeight = (windowWidth * height) / width;
const fieldStyles = {
width: windowWidth,
height: calculatedHeight,
aspectRatio,
};

return (


...


);
};

const HeatMap = () => {
return ;
};

Это результат:




Подробнее здесь: https://stackoverflow.com/questions/616 ... native-svg