Question

是否有任何数学天才知道或能够设计出将相对坐标转换为绝对坐标的算法？

我创建了一个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]

Answer 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

将相对坐标转换为绝对坐标的算法

1 个答案: