查找方形svg的中间坐标 [英] find coordinates of the middle of a square svg

问题描述

假设我有一个svg正方形

Let's say I have a svg square

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

我正在尝试以一种灵活的方式找到确切的中心，在这种情况下(44，34)，以便即使我写了:

I'm trying to find the exact center, in this case (44, 34), in a flexible way so that even if I wrote:

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

此问题与不同如何获得< g>的中点使用javascript 在svg中添加标签
我想知道正方形的中心，甚至在css3动画转换之后.我希望将其存储为:

This question is different to How to get Mid point of <g> tag in svg using javascript in that
I want to know the center of the square even after css3 animations, transformation. And I want it to be stored like this:

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

推荐答案

U可以通过像这样计算来找到中心:

U can find center of this by calculating like :

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

但这在应用变换后将不起作用，因为如果您注意到，应用变换时坐标不会真正改变.

But this wont work after applying transform because if you notice,co-ordinates don't really change when you apply transform.

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

You may need help of trigonometry or geometry to find new transformed co-ordinates.

这篇关于查找方形svg的中间坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！