Как исправить исходные изменения преобразования в SVG при изменении размера в браузере - PullRequest
Новая
       19

Как исправить исходные изменения преобразования в SVG при изменении размера в браузере

0 голосов
/ 10 июня 2019

У меня есть SVG с анимированными путями с использованием ключевых кадров CSS. Проблема заключается в изменении размера шрифта для обеспечения доступности (с помощью команды + или команды - например, на Mac), которая отбрасывает начало вращающихся путей - в данном случае кружки.

Пример кода можно найти здесь - https://codepen.io/owengot/pen/XwQbqK

CSS для рассматриваемых кругов таков: 

#circle1 {
-webkit-transform: translate3d(0, 0, 0);
-webkit-transform-origin: 200px 200px;
-webkit-transform: translate3d(0, 0, 0);
-webkit-animation: rotate-right 12s linear 0s infinite;
}

#circle2 {
-webkit-transform: translate3d(0, 0, 0);
-webkit-transform-origin: 200px 200px;
-webkit-transform: translate3d(0, 0, 0);
-webkit-animation: rotate-left 24s linear 0s infinite;
}

#circle3 {
-webkit-transform: translate3d(0, 0, 0);
-webkit-transform-origin: 200px 200px;
-webkit-transform: translate3d(0, 0, 0);
-webkit-animation: rotate-right 12s linear 0s infinite;
}

 #circle4 {
-webkit-transform: translate3d(0, 0, 0);
-webkit-transform-origin: 200px 200px;
-webkit-transform: translate3d(0, 0, 0);
-webkit-animation: rotate-left 24s linear 0s infinite;
}

#circle5 {
-webkit-transform: translate3d(0, 0, 0);
-webkit-transform-origin: 200px 200px;
-webkit-transform: translate3d(0, 0, 0);
-webkit-animation: rotate-right 12s linear 0s infinite;
}

Чтобы решить эту проблему, есть ли - а) способ предотвратить изменение размера элемента SVG (или любой элемент в этом отношении)? b) способ сохранить свойство источника преобразования относительно окна просмотра SVG?

, чтобы добавить к решению B) Я попытался исправить происхождение в процентах, это не решает проблему.

...