IE浏览器中SVG Transform属性translate的X/Y值判定问题

原因分析 #

IE浏览器对SVG transform 属性的解析和现代浏览器存在差异：当translate的Y轴值为默认的0时，IE会省略该值，只返回translate(x)格式；而Chrome、Firefox等现代浏览器会保留完整的translate(x, 0)格式。所以你拿到的"translate(297.5)"中，297.5是X轴值，Y轴值默认是0。

解决方案 #

方法1：手动解析transform字符串（兼容所有D3版本）

写一个通用函数来提取X、Y轴的translate值，同时处理单值和双值的情况：

function getTranslateCoords(transformStr) {
  const translateMatch = transformStr.match(/translate\(([^)]+)\)/);
  if (!translateMatch) return { x: 0, y: 0 };
  
  const coords = translateMatch[1]
    .split(',')
    .map(val => parseFloat(val.trim()) || 0);
  
  return {
    x: coords[0],
    y: coords.length > 1 ? coords[1] : 0
  };
}

使用示例：

const barElement = d3.select(me.svg.selectAll(".groupedbar")[0][0]);
const transformStr = barElement.attr("transform");
const { x, y } = getTranslateCoords(transformStr);
// x=297.5，y=0（IE场景）；现代浏览器也能正确解析完整的translate(x,y)

方法2：利用D3内置方法（仅适用于D3 v3及更早版本）

D3 v3提供了d3.transform()方法来解析transform属性，自动补全默认值：

const barElement = d3.select(me.svg.selectAll(".groupedbar")[0][0]);
const transformObj = d3.transform(barElement.attr("transform"));
const x = transformObj.translate[0];
const y = transformObj.translate[1]; // IE下会自动返回0

注意：D3 v4及以上版本移除了d3.transform()，所以这种方法仅适用于旧版D3。

内容的提问来源于stack exchange，提问作者ozil