Question

我有一个圆圈和一个SVG平面：

<svg width="400" height="400">
  <g class="point" transform="translate(6.5,1)">
     <g class="delete-point" transform="translate(11,-11)"></g>
     <circle></circle>
     <text class="point-index" y="4"><tspan text-anchor="middle">0</tspan></text>
  </g>
</svg>

这就是我得到圆圈的x和y的方式：

          d3.selectAll('.point')
            .each(function() {
              var c = d3.select(this)
              var cX = d3.transform(c.attr('transform')).translate[0]
              var cY = d3.transform(c.attr('transform')).translate[1]
              list.push({ x: Math.round(cX), y: Math.round(cY), index: k++ })
            }

现在X和Y的0位于左上角。如何做到这样，X和Y的0位于平面的中间？

注意：.point是圆圈，svg是飞机。

Answer 1

您可以使用翻译变换来更改SVG文件的来源：

<svg width="400" height="400">
  <g transform="translate(200 200)">

    <!-- coordinate (0,0) is now in the center of the SVG -->
    <circle cx="0" cy="0" r="150" fill="red"/>
    
  </g>
</svg>

如何将SVG对象的X Y坐标的中心转换为平面的中心？

1 个答案: