將相對座標轉換爲絕對座標的算法

-1

是否有任何知道或能夠設計將相對座標轉換爲絕對座標的算法的數學天才？將相對座標轉換爲絕對座標的算法

我創建了一個SVG（codepen），其中包含負載和負載，負載爲paths（大約爲600）和其他SVG元素，其中大部分（大約100）都應用了CSS轉換。不幸的是，我使用Chrome創建了它，從不費心檢查Firefox或其他瀏覽器。

在Firefox上，它們都不能正常工作，因爲轉換與視口或SVG視框相關;我並不完全確定哪一個，因爲我爲viewBox和width和height設置了相同的值。 Microsoft Edge是另一個野獸。似乎Edge甚至不支持目前應用於SVG的CSS轉換。

我遇到過其他問題（和響應），其中指出使用「絕對」座標（或相對於viewBox的座標）的足夠的跨瀏覽器解決方案。

那麼，有沒有簡單的方法來翻譯這樣的座標？

我寫了一個腳本，爲我提供必要的調整，可以在下面看到！

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]

來源

2017-02-15 Anthony

你有沒有試過自己？ SO是關於編程的，你的問題似乎沒有多大關係.. –

@DanielB我還沒有嘗試過任何東西，因爲，正如我所說的，SVG基本上是6000線，大約有600條路徑......如果情況變差，我只能手動重新計算所有座標，但我寧願不這樣做。我首先使用個人路徑，而不是使用''，這完全是因爲根據文件大小保存的空間大小可以忽略不計計算每個路徑相對於SVG本身的所有座標：/ – Anthony

您似乎沒有使用SVG轉換（即轉換屬性），您正在使用CSS轉換。在Firefox中，它們可以正常工作，在Chrome中它們不會。 –

-1

對於那些誰被我的問題感到困惑，下面基本上是我問的。

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(` 
    `) 
}

...它記錄以控制每個門的以下信息。

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

來源

2017-02-15 21:05:34 Anthony

將相對座標轉換爲絕對座標的算法

回答

相關問題