Существует ли способ предотвратить растеризацию изображений SVG при изменении их ориентации с помощью CSS «Transform: ro ⇐ CSS

[Anonymous]

Я пытаюсь построить приложение погоды с React. Я хочу достичь эффекта игрового автомата при прокрутке погодных карт. У большинства этих карт есть диаграммы на них. Чтобы нарисовать диаграммы, я использую библиотеку «Recharts», которая генерирует диаграммы SVG. Для достижения эффекта игрового автомата я использую в основном преобразование: rotatex () в зависимости от того, насколько далеко находится карта от центра прокручиваемой области. Проблема в том, что когда страница загружается и преобразование не применяется, диаграммы, текст и SVG выглядят красиво и «четко», но когда я начинаю прокручивать, происходит немедленное изменение резкости, все становится немного размытым, иногда больше, иногда меньше, это странно. Я читал, что это, скорее всего, из -за ратеризации. Я немного погуглил и не нашел подходящего решения для моего случая. Я обнаружил, что у библиотеки "kartss.js" не было бы таких проблем, потому что она использует Canvas вместо SVG, но я хотел бы придерживаться переполнений здесь. Могу ли я избежать этого эффекта без перехода на холст? < /P>
Проблема возникает на рабочем столе. На мобильных устройствах все кажется в порядке. Вот ссылка на CodeSandbox, которая показывает, как она выглядит:
https://codesandbox.io/p/sandbox/rechar ... kkvобразно Не помог < /p>

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

shape-rendering: geometricPrecision;
text-rendering: geometricPrecision;
image-rendering: optimizeQuality;
backface-visibility: hidden;

Редактировать: Решение, описанное в правом ответе на этот пост, работающий в моем случае с помощью CHALL: Transform Добавлено в ближайший родительский контейнер (песочница теперь изменяется соответственно). Это заметно повредит производительности на первом рендере, но это работает

Подробнее здесь: https://stackoverflow.com/questions/796 ... heir-orien