An algorithm to translate relative coordinates to absolute coordinates

Question

Are there any math geniuses out there that are aware of or able to devise an algorithm that will translate relative coordinates into absolute coordinates?

I created an SVG (codepen) with loads and loads and loads of paths (roughly 600) and other SVG elements, a great number of which (roughly 100) have CSS transformations applied to them. Unfortunately, I created it using Chrome and never bothered to check Firefox or other browsers.

On Firefox, none of them work correctly because the transforms are happening in relation to either the viewport or the SVG viewbox; I'm not entirely sure which one since I set the same values for the viewBox and the width and height. Microsoft Edge is another beast. It seems as if Edge doesn't even support CSS transforms applied to SVGs at the moment.

I've come across other questions (and responses) which state an adequate cross browser solution is to use "absolute" coordinates (or coordinates relative to the viewBox).

So again, is there an easy way to translate such coordinates accordingly?

I ended up writing a script that provides me with the necessary adjustments, which can be seen below!

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]

Have you tried anything yourself? SO is about programming and your question doesn't seem to be that much related to that.. — Daniel B, Feb 15 '17 at 07:37
@DanielB I haven't tried anything yet because, as I stated, the SVG is basically 6,000 lines long with roughly 600 paths... If worse comes to worst, I'll just have to manually recalculate all of the coordinates, but I'd rather not do that. The whole reason I used individuals paths in the first place, instead of using ``, was precisely because the space I'd save in the file size would be negligible in light of the amount of time it would take to calculate all of the coordinates for each path relative to the SVG itself :/ — oldboy, Feb 15 '17 at 07:47
You don't seem to be using SVG transforms (i.e the transform attribute), you're using CSS transforms. In Firefox they work correctly, in Chrome they don't. — Robert Longson, Feb 15 '17 at 07:52
@RobertLongson I'm using CSS transforms with transitions, and applying the effects in JS. — oldboy, Feb 15 '17 at 07:53
Various statements in your question are incorrect is what I'm pointing out. — Robert Longson, Feb 15 '17 at 07:56
@RobertLongson Which statements so that I can fix them?? [edit: I changed the wording, so hopefully there's less ambiguity as to what I meant.] — oldboy, Feb 15 '17 at 07:57
The ones I stated of course! CSS transforms not SVG transforms (which you've fixed now), On Firefox they all work correctly (which is a problem for you because you coded against the buggy Chrome implementation). — Robert Longson, Feb 15 '17 at 07:59
@RobertLongson Hence I'm asking the community if anybody is aware of any relevant algorithms. — oldboy, Feb 15 '17 at 08:01
@RobertLongson Btw, Chrome's implementation (even though it's not according to standard) is wayyy more practical and sensible. Instead of needing 100 lines of code to set the transforms in Firefox, all I needed in Chrome was 8 lines. — oldboy, Feb 15 '17 at 08:21
Duplicate of http://stackoverflow.com/questions/9677885/convert-svg-path-to-absolute-commands ? — Paul LeBeau, Feb 15 '17 at 12:42
Until Chrome fixes its implementation of `transform-origin`, or FF ships support for `transform-box` (soon), the best (only) solution is to not use percentage values in `transform-origin`. — Paul LeBeau, Feb 15 '17 at 12:48
@PaulLeBeau hey can you please check out [my other question](https://stackoverflow.com/questions/42262474/svg-transform-origin-in-firefox?noredirect=1#comment71686374_42262474) quickly? for some reason in firefox elements are shifting position after applying `transform:rotate(90deg)` and then applying `transform:rotate(0)` — oldboy, Feb 16 '17 at 04:32

oldboy · Accepted Answer · 2017-02-15T22:22:54.380

For those who were confused by my question, below is basically what I was asking for.

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 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

An algorithm to translate relative coordinates to absolute coordinates

1 Answers1