变换后的矩形坐标 [英] Rectangle coordinates after transform

问题描述

我目前正在用他的父元素（g）绘制一个矩形。
产生的svg是这个;

 < svg version =1.1width =1055height = 381\" > 
< g transform =rotate（120）> 
  < / g> 
< / svg> 
  

现在我试着动态地检索其中一个 rects 的坐标，但使用getBBox不会返回正确的结果。任何人都可以告诉我如何获得其中一个rects的正确的x，y，width和height属性？

我自己的解决方案;

  var matrix = shape.getCTM（）; 
 
 //使用变换矩阵变换一个点
 var position = svg.createSVGPoint（）; 
 position.x = $（shape）.attr（x）; 
 position.y = $（shape）.attr（y）; 
 position = position.matrixTransform（matrix）; 
  

I am currently drawing a rectangle with a transformation on his parent element (g). The resulting svg is this;

<svg version="1.1" width="1055" height="381">
   <g transform="rotate(120)">
      <rect x="0" y="0" width="100" height="100" rx="10" ry="0" stroke-width="0" style="stroke:rgb(0,0,0)" id="rect-0"></rect>
      <rect x="100" y="0" width="100" height="100" rx="10" ry="0" stroke-width="0" style="stroke:rgb(0,0,0)" id="rect-1"></rect>
   </g>
</svg> 

Now I am trying to retrieve the coordinates of one of the rects dynamically, but using getBBox does not return the correct result. Can anyone tell me how to get the correct x, y, width and height properties of one of the rects?

解决方案

I found the solution myself;

var matrix = shape.getCTM();

// transform a point using the transformed matrix
var position = svg.createSVGPoint();
position.x = $(shape).attr("x");
position.y = $(shape).attr("y");
position = position.matrixTransform(matrix);

这篇关于变换后的矩形坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！