<!DOCTYPE HTML>
<html>
<body>
<svg style="width: 250px; height: 144px; border: solid black 1px;">
<text id="label1" x="75" y="30" transform="rotate(10, 75, 34.5)">Sprint 13_March_2015</text>
<text id="label2" x="100" y="30" transform="rotate(10, 100, 34.5)">DT_Apr2015_Sprint13</text>
<polygon id=polygon1 fill="none" stroke="blue" stroke-dasharray="5 5" stroke-width=1 />
<polygon id=polygon2 fill="none" stroke="red" stroke-dasharray="5 5" stroke-width=1 />
</svg>
<br>
<button onClick=testOverlap()>Test Overlap</button>
<script>
function testOverlap()
{
//---show 'native' rects---
var trns1=label1.getAttribute("transform")
label1.removeAttribute("transform")
var bb1=label1.getBBox()
var bb1x=bb1.x
var bb1y=bb1.y
var bb1w=bb1.width
var bb1h=bb1.height
label1.setAttribute("transform",trns1)
var pnts1=[bb1x,bb1y,bb1x,bb1y+bb1h,bb1x+bb1w,bb1y+bb1h,bb1x+bb1w,bb1y]
polygon1.setAttribute("points",pnts1.join())
polygon1.setAttribute("transform",trns1)
//---remove transform from polygon--
ctmPolygon(polygon1)
var trns2=label2.getAttribute("transform")
label2.removeAttribute("transform")
var bb2=label2.getBBox()
var bb2x=bb2.x
var bb2y=bb2.y
var bb2w=bb2.width
var bb2h=bb2.height
label2.setAttribute("transform",trns2)
var pnts2=[bb2x,bb2y,bb2x,bb2y+bb2h,bb2x+bb2w,bb2y+bb2h,bb2x+bb2w,bb2y]
polygon2.setAttribute("points",pnts2.join())
polygon2.setAttribute("transform",trns2)
//---remove transform from polygon--
ctmPolygon(polygon2)
alert(getPolygonIntersect(polygon1,polygon2))
}
//---screen points for polygon---
function ctmPolygon(myPoly)
{
\t var ctm = myPoly.getCTM()
\t var svgRoot = myPoly.ownerSVGElement
\t var pointsList = myPoly.points;
\t var n = pointsList.numberOfItems;
\t for(var m=0; m < n; m++)
\t {
\t \t var mySVGPoint = svgRoot.createSVGPoint();
\t \t mySVGPoint.x = pointsList.getItem(m).x
\t \t mySVGPoint.y = pointsList.getItem(m).y
\t \t mySVGPointTrans = mySVGPoint.matrixTransform(ctm)
\t \t pointsList.getItem(m).x=mySVGPointTrans.x
\t \t pointsList.getItem(m).y=mySVGPointTrans.y
\t };
\t myPoly.removeAttribute("transform")
}
function getPolygonIntersect(polygonA,polygonB)
{
\t var IntPoints=[]
\t var aPoints=polygonA.points
\t var m=aPoints.numberOfItems
\t for(var i=0;i<m;i++)
\t {
\t \t var aX1=aPoints.getItem(i).x
\t \t var aY1=aPoints.getItem(i).y
\t \t if(i<m-1)
\t \t {
\t \t \t var aX2=aPoints.getItem(i+1).x
\t \t \t var aY2=aPoints.getItem(i+1).y
\t \t }
\t \t else
\t \t {
\t \t \t var aX2=aPoints.getItem(0).x
\t \t \t var aY2=aPoints.getItem(0).y
\t \t }
\t \t var bPoints=polygonB.points
\t \t var n=bPoints.numberOfItems
\t \t for(var k=0;k<n;k++) //--each side of polygon---
\t \t {
\t \t \t var bX1=bPoints.getItem(k).x
\t \t \t var bY1=bPoints.getItem(k).y
\t \t \t if(k<n-1)
\t \t \t {
\t \t \t \t var bX2=bPoints.getItem(k+1).x
\t \t \t \t var bY2=bPoints.getItem(k+1).y
\t \t \t }
\t \t \t else
\t \t \t {
\t \t \t \t var bX2=bPoints.getItem(0).x
\t \t \t \t var bY2=bPoints.getItem(0).y
\t \t \t }
\t \t \t //---return false or intersect point---
\t \t \t var xy=lineSegIntersect(aX1,aY1,aX2,aY2,bX1,bY1,bX2,bY2)
\t \t \t if(xy)
\t \t \t {
\t \t \t \t if(IntPoints.join().indexOf(xy)==-1)//--no dups--
\t \t \t \t {
\t \t \t \t \t IntPoints.push(xy)
\t \t \t \t }
\t \t \t }
\t \t }
\t }
if(IntPoints.length>0)
return true
else
return false
}
//---compare two lines: A.B---
function lineSegIntersect(aX1,aY1,aX2,aY2,bX1,bY1,bX2,bY2)
{
\t //---compute vectors Va, Vb--------
\t var Va=((bX2-bX1)*(aY1-bY1) - (bY2-bY1)*(aX1-bX1))/ ((bY2-bY1)*(aX2-aX1) - (bX2-bX1)*(aY2-aY1))
\t var Vb=((aX2-aX1)*(aY1-bY1) - (aY2-aY1)*(aX1-bX1))/((bY2-bY1)*(aX2-aX1) - (bX2-bX1)*(aY2-aY1))
\t if(Va>0 && Va<1 && Vb>0 && Vb<1)
\t {
\t //---intersect true, show point---
\t \t var ma=(aY2-aY1)/(aX2-aX1)
\t \t var mb=(bY2-bY1)/(bX2-bX1)
\t \t if(aX2!=aX1&&bX2!=bX1) //---!vertical line---
\t \t {
\t \t \t var x=(aX1*ma-aY1-bX1*mb+bY1)/(ma-mb)
\t \t \t var y=ma*(x-aX1)+aY1
\t \t }
\t \t else if(aX2==aX1)
\t \t {
\t \t \t var x=aX1
\t \t \t var y=mb*(x-bX1)+bY1
\t \t }
\t \t else if(bX2==bX1)
\t \t {
\t \t \t var x=bX1
\t \t \t var y=ma*(x-aX1)+aY1
\t \t }
\t \t return [x,y]
}
\t else
\t return false
}
</script>
</body>
</html>
Tại sao bạn không thể đo lường văn bản xoay? Có gì sai với getBBox hoặc getBoundingClientRect? –
Nếu tôi sử dụng phương thức getBoundingClientRect, văn bản SVG-3 2'nd sẽ bị xóa. Vì vùng văn bản đầu tiên (x + chiều rộng) trùng với vị trí văn bản 2'nd. Vui lòng tham khảo đầu ra SVG cuối cùng fiddle – Bharathi
Hãy hiển thị những gì bạn đang làm, không có javascript trong mã của bạn. –