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

How to turn the center of the X Y coordinates of a SVG object to the center of the plane?

本文关键字：平面 坐标 SVG 对象      更新时间：2023-09-26

我有一个圆和一个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是平面。

您可以使用翻译转换更改 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>

相关文章：