-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]
你有没有试过自己？ SO是关于编程的，你的问题似乎没有多大关系.. –
@DanielB我还没有尝试过任何东西，因为，正如我所说的，SVG基本上是6000线，大约有600条路径......如果情况变差，我只能手动重新计算所有坐标，但我宁愿不这样做。我首先使用个人路径，而不是使用'
您似乎没有使用SVG转换（即转换属性），您正在使用CSS转换。在Firefox中，它们可以正常工作，在Chrome中它们不会。 –