查找正方形SVG中间的坐标

Question

假设我有一个svg square

<svg>
    <rect x="4" y="4" width="80" height="60" id="block_green"/>
</svg>

我试图以一种灵活的方式在这种情况下找到确切的中心（44，34），以便我写信：

<svg>
    <rect x="4" y="4" width="80" height="60" transform="rotate(15, 44, 34) id="block_green"/>
</svg>

这个问题与如何获得＆lt; g＆gt;使用JavaScript在SVG中标记
即使在 CSS3动画，转换后，我也想知道Square 的中心。我希望它像这样存储：

ss.cx = "x center coordinates";
ss.cy = "y center coordinates";

Answer 1

您可以通过计算以下计算来找到其中的中心。

centerX = (rectX + rectWidth)/2
centerY = (rectY + rectHeight)/2

但是，这种应用转换后无法使用，因为如果您注意到，坐标在应用转换时不会真正改变。

您可能需要三角学或几何学的帮助才能找到新的变换的坐标。