找到一个正方形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>

这个问题与How to get Mid point of <g> tag in svg using javascript不同 我想知道正方形的中心甚至在 css3动画，转换之后。我希望它像这样存储：

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

Answer 1

你可以通过计算如下来找到这个中心：

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

但是在应用变换后这不会起作用，因为如果你注意到，当你应用变换时，坐标并没有真正改变。

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