不使用translate/transform函数在SVG中绘制并移动圆弧的可行性

没问题，我来帮你搞定这两个SVG圆弧的问题——毕竟遇到导出SVG时不支持translate/transform的情况，确实挺闹心的！下面针对你的两个需求给出具体的实现思路和D3代码示例：

一、不使用translate绘制指定位置的圆弧 #

D3的d3.svg.arc()默认生成的路径是基于坐标原点(0,0)的，如果不想用translate来定位，我们可以手动偏移路径中的所有坐标点，让圆弧直接出现在目标位置。

核心思路是：

• 先生成原始的圆弧路径字符串
• 解析路径中的每个命令（M、A、L、Z等），将命令中的坐标点加上目标偏移量
• 使用偏移后的路径字符串来绘制圆弧

示例代码：

var vis = d3.select("body").append("svg")
var pi = Math.PI;
var arc = d3.svg.arc()
  .innerRadius(50)
  .outerRadius(70)
  .startAngle(45 * (pi/180)) // 起始角度45度（转弧度）
  .endAngle(3) // 结束角度（弧度）

vis.attr("width", "400").attr("height", "400")

// 定义路径偏移函数：给圆弧路径添加坐标偏移量
function offsetArcPath(arcGenerator, offsetX, offsetY) {
  var originalPath = arcGenerator();
  // 解析原始路径的命令集合
  var pathCommands = d3.pathCommands(originalPath);
  var newPath = d3.path();
  
  pathCommands.forEach(cmd => {
    switch(cmd.type) {
      case 'M': // 移动命令
        newPath.moveTo(cmd.x + offsetX, cmd.y + offsetY);
        break;
      case 'L': // 直线命令
        newPath.lineTo(cmd.x + offsetX, cmd.y + offsetY);
        break;
      case 'A': // 圆弧命令：注意只有最后两个参数是坐标，需要偏移
        newPath.arc(cmd.rx, cmd.ry, cmd.angle, cmd.largeArc, cmd.sweep, cmd.x + offsetX, cmd.y + offsetY);
        break;
      case 'Z': // 闭合路径命令
        newPath.closePath();
        break;
    }
  });
  
  return newPath.toString();
}

// 将圆弧直接绘制在(150, 150)位置，完全不需要translate
vis.append("path")
  .attr("d", offsetArcPath(arc, 150, 150))
  .attr("fill", "red")

二、不使用translate/transform移动已绘制的圆弧 #

如果需要移动已有的圆弧，同样不需要依赖transform="translate(...)"，只需要重新计算路径的坐标偏移量，更新path元素的d属性即可。

示例代码（基于上面的绘制代码）：

// 获取页面上已绘制的圆弧路径元素
var existingArc = vis.select("path");

// 定义移动函数：将圆弧从当前位置移到目标坐标
function moveArc(pathElement, targetX, targetY) {
  var currentPathStr = pathElement.attr("d");
  var pathCommands = d3.pathCommands(currentPathStr);
  
  // 取路径的第一个移动命令坐标作为当前位置基准
  var currentStartX = pathCommands.find(cmd => cmd.type === 'M').x;
  var currentStartY = pathCommands.find(cmd => cmd.type === 'M').y;
  
  // 计算需要偏移的差值
  var deltaX = targetX - currentStartX;
  var deltaY = targetY - currentStartY;
  
  // 重新生成偏移后的路径
  var updatedPath = d3.path();
  pathCommands.forEach(cmd => {
    switch(cmd.type) {
      case 'M':
        updatedPath.moveTo(cmd.x + deltaX, cmd.y + deltaY);
        break;
      case 'L':
        updatedPath.lineTo(cmd.x + deltaX, cmd.y + deltaY);
        break;
      case 'A':
        updatedPath.arc(cmd.rx, cmd.ry, cmd.angle, cmd.largeArc, cmd.sweep, cmd.x + deltaX, cmd.y + deltaY);
        break;
      case 'Z':
        updatedPath.closePath();
        break;
    }
  });
  
  // 更新路径的d属性，完成移动
  pathElement.attr("d", updatedPath.toString());
}

// 示例：1秒后将圆弧移动到(250, 200)位置
setTimeout(() => {
  moveArc(existingArc, 250, 200);
}, 1000);

原理说明 #

SVG的path元素默认使用绝对坐标，所有图形位置都由路径命令中的坐标值直接决定。通过修改这些坐标值，我们可以完全绕过translate或transform属性来控制圆弧的位置，这样导出SVG为图片时就不会出现兼容性问题了。

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