本文介绍了变换后的矩形坐标的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
现在我试着动态地检索其中一个 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);
我目前正在用他的父元素(g)绘制一个矩形。 产生的svg是这个;
< svg version =1.1width =1055height = 381\" > < g transform =rotate(120)>
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);
更多推荐
变换后的矩形坐标
发布评论