【发布时间】：2017-02-15 07:15:42
【问题描述】：
是否有任何数学天才知道或能够设计一种将相对坐标转换为绝对坐标的算法？
我创建了一个 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 基本上有 6,000 行长，大约有 600 条路径......如果情况更糟，我只需要手动重新计算所有坐标，但我不想那样做。我首先使用个人路径而不是使用
<defs><path/></defs><use></use>的全部原因正是因为考虑到计算所有文件所需的时间，我在文件大小中节省的空间可以忽略不计每个路径相对于 SVG 本身的坐标：/ -
您似乎没有使用 SVG 转换（即 transform 属性），您使用的是 CSS 转换。在 Firefox 中它们可以正常工作，而在 Chrome 中则不能。
-
@RobertLongson 我正在使用带有过渡的 CSS 转换，并在 JS 中应用效果。
-
我要指出的是，您问题中的各种陈述都不正确。
标签： javascript html xml svg