Есть ли математические гении, которые знают или могут разработать алгоритм, который будет переводить относительные координаты в абсолютные координаты?Алгоритм для перевода относительных координат в абсолютные координаты
Я создал SVG (codepen) с нагрузками и нагрузками и нагрузками paths (примерно 600) и другими элементами SVG, множество из которых (примерно 100) имеют к ним CSS-преобразования. К сожалению, я создал его с помощью Chrome и никогда не потрудился проверять Firefox или другие браузеры.
В Firefox никто из них не работает правильно, потому что преобразования происходят в отношении окна просмотра или окна просмотра SVG; Я не совсем уверен, какой из них, поскольку я установил те же значения для viewBox и width и height. Microsoft Edge - еще один зверь. Кажется, что Edge даже не поддерживает преобразования CSS, применяемые к SVG на данный момент.
Я столкнулся с другими вопросами (и ответами), в которых утверждается, что подходящее кросс-браузерное решение должно использовать «абсолютные» координаты (или координаты относительно 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 - нет. –