Ein Algorithmus zum Übersetzen relativer Koordinaten in absolute Koordinaten

Question

Gibt es mathematische Genies, die einen Algorithmus kennen oder entwickeln können, der relative Koordinaten in absolute Koordinaten übersetzt?

Ich erstellte ein SVG (codepen) mit Lasten und Lasten und Lasten von paths (etwa 600) und andere SVG-Elemente, von denen eine große Anzahl (etwa 100) CSS-Transformationen angewendet haben. Leider habe ich es mit Chrome erstellt und habe mich nie um Firefox oder andere Browser gekümmert.

In Firefox funktioniert keiner von ihnen richtig, da die Transformationen in Bezug auf das Ansichtsfenster oder die SVG-Viewbox stattfinden; Ich bin mir nicht ganz sicher, welcher seit ich die gleichen Werte für die viewBox und die width und height gesetzt habe. Microsoft Edge ist ein weiteres Biest. Es scheint, als ob Edge CSS-Transformationen, die momentan auf SVGs angewendet werden, nicht unterstützt.

Ich bin auf andere Fragen (und Antworten) gestoßen, die eine adäquate Cross-Browser-Lösung angeben, ist die Verwendung von "absoluten" Koordinaten (oder Koordinaten relativ zu viewBox).

Also wieder gibt es eine einfache Möglichkeit, solche Koordinaten entsprechend zu übersetzen?

Ich habe am Ende ein Skript geschrieben, das mir die notwendigen Anpassungen liefert, die unten zu sehen sind!

for (i = 0; i < groundDoorIds.length; i++) { 
    var a = groundDoorIds[i].replace('g-o-', ''); 
    console.log(a); 
    var b = document.getElementById(groundDoorIds[i]); 
    var c = b.getAttribute('d'); 
    var d = c.substr(2, 11); 
    var e; 
    if (d.indexOf('h') < 0) { 
    if (d.indexOf('H') < 0) { 
     if (d.indexOf('v') < 0) { 
     e = d.indexOf('V'); 
     } else { 
     e = d.indexOf('v'); 
     } 
    } else { 
     e = d.indexOf('H'); 
    } 
    } else { 
    e = d.indexOf('h'); 
    } 
    var f = d.slice(0, e); 
    var g = f.indexOf(','); 
    var h = f.slice(0, g); 
    var j = f.slice(g + 1); 
    var k; 
    var l; 
    if (a.indexOf('door-right-top') > 0 || a.indexOf('door-right-bottom') > 0) { 
    k = Number(h) + 0.5; 
    l = Number(j); 
    } else if (a.indexOf('door-left-top') > 0 || a.indexOf('door-left-bottom') > 0) { 
    k = Number(h) - 0.5; 
    l = Number(j); 
    } else if (a.indexOf('door-bottom-left') > 0 || a.indexOf('door-bottom-right') > 0) { 
    k = Number(h); 
    l = Number(j) + 0.5; 
    } else if (a.indexOf('door-top-left') > 0 || a.indexOf('door-top-right') > 0) { 
    k = Number(h); 
    l = Number(j) - 0.5; 
    } 
    console.log('style="transform-origin:' + k + 'px ' + l + 'px;"') 
    console.log(` 
    `) 
} 

// which logs to the console the following information for each door 
// 
// construction-shop-stairwell-c-door-right-top [part of id of ele] 
// style="transform-origin:92.5px 11px;"   [new "absolute" coords] 

Answer 1

Für diejenigen, die durch meine Frage verwirrt wurden, ist unten im Grunde, was ich fragte.

for (i = 0; i < groundDoorIds.length; i++) { 
    var a = groundDoorIds[i].replace('g-o-', ''); 
    console.log(a); 
    var b = document.getElementById(groundDoorIds[i]); 
    var c = b.getAttribute('d'); 
    var d = c.substr(2, 11); 
    var e; 
    if (d.indexOf('h') < 0) { 
    if (d.indexOf('H') < 0) { 
     if (d.indexOf('v') < 0) { 
     e = d.indexOf('V'); 
     } else { 
     e = d.indexOf('v'); 
     } 
    } else { 
     e = d.indexOf('H'); 
    } 
    } else { 
    e = d.indexOf('h'); 
    } 
    var f = d.slice(0, e); 
    var g = f.indexOf(','); 
    var h = f.slice(0, g); 
    var j = f.slice(g + 1); 
    var k; 
    var l; 
    if (a.indexOf('door-right-top') > 0 || a.indexOf('door-right-bottom') > 0) { 
    k = Number(h) + 0.5; 
    l = Number(j); 
    } else if (a.indexOf('door-left-top') > 0 || a.indexOf('door-left-bottom') > 0) { 
    k = Number(h) - 0.5; 
    l = Number(j); 
    } else if (a.indexOf('door-bottom-left') > 0 || a.indexOf('door-bottom-right') > 0) { 
    k = Number(h); 
    l = Number(j) + 0.5; 
    } else if (a.indexOf('door-top-left') > 0 || a.indexOf('door-top-right') > 0) { 
    k = Number(h); 
    l = Number(j) - 0.5; 
    } 
    console.log('style="transform-origin:' + k + 'px ' + l + 'px;"') 
    console.log(` 
    `) 
} 

... welche die folgenden Informationen für jede Tür protokolliert.

construction-shop-stairwell-c-door-right-top // part of id of ele 
style="transform-origin:92.5px 11px;"   // new "absolute" coords