ivan-igorevich/mdm-ordinis
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(loader): remove transform-box fill-box — orbits rotated around offset bbox

Browse Source 
CSS transform-box default для SVG = view-box (transform-origin в viewBox
user coords). С transform-box: fill-box origin становится относительным
bounding-box каждой группы (whirl + whirl-rev — arc bbox смещён). Арки
летали по неправильной траектории. Прототип HTML rely on default — copy.
This commit is contained in:
Zimin A.N.
2026-05-11 22:43:32 +03:00
parent acde4e134d
commit 82b754b3ab
1 changed files with 5 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ordinis-admin-ui/src/styles.css
+5 -3
View File
@@ -384,19 +384,21 @@ body {
0%, 100% { opacity: 0.18; } 0%, 100% { opacity: 0.18; }
50% { opacity: 0.42; } 50% { opacity: 0.42; }
} }
/* transform-box default = view-box для SVG elements — transform-origin
* считается в SVG user coordinates (viewBox 0 0 200 200). 100px 100px =
* центр глобуса. Прошлая версия с transform-box: fill-box ломала орбиты
* (origin становился offset bounding-box'а каждой группы — арки летали
* вокруг неправильной точки). Прототип HTML использует default — copy. */
.globe-loader .globe-whirl { .globe-loader .globe-whirl {
transform-origin: 100px 100px; transform-origin: 100px 100px;
transform-box: fill-box;
animation: ord-globe-spin 3.6s linear infinite; animation: ord-globe-spin 3.6s linear infinite;
} }
.globe-loader .globe-whirl-rev { .globe-loader .globe-whirl-rev {
transform-origin: 100px 100px; transform-origin: 100px 100px;
transform-box: fill-box;
animation: ord-globe-spin 5.4s linear infinite reverse; animation: ord-globe-spin 5.4s linear infinite reverse;
} }
.globe-loader .globe-pulse { .globe-loader .globe-pulse {
transform-origin: 100px 100px; transform-origin: 100px 100px;
transform-box: fill-box;
animation: ord-globe-pulse 2.4s ease-in-out infinite; animation: ord-globe-pulse 2.4s ease-in-out infinite;
} }
/* Sphere/land внутри globe-loader rotates через d3 projection (rAF /* Sphere/land внутри globe-loader rotates через d3 projection (rAF