変換のある要素とSVGの交差

Question

Intersection library from Kevin Lindseyは、いくつかの種類の要素（パス、矩形、線など）間の交差を簡単に計算できます。

しかし、いずれのオブジェクトにもtransform="translate(x,y) rotate(r)"を介して適用された変換は考慮されていないようです。

<svg> 
    <polygon id="machine" transform="translate(40,25) rotate(45)"... /> 
    <path id="outer" ... /> 
</svg> 

<script> 
var machine = document.getElementById("machine") 
var outer = document.getElementById("outer") 

var m = new Polygon(machine) 
var o = new Path(outer) 

Intersection.intersectPathShape(o, m) // incorrect 
</script> 

交差を計算する際に、要素に適用された変換を考慮する方法はありますか？

Answer 1

「スクリーン」値の値を変更して、変換を抽出してみることもできます。以下は、（弧を除く）のポリゴンやパスのためのいくつかの例は以下のとおりです。パス上の 注：クロム最近pathSegListを非推奨となりましたポリフィルを必要とし、 https://github.com/progers/pathseg

//---except arc paths--- 
 
function screenPath(path) 
 
{ 
 
\t var sCTM = path.getCTM() 
 
\t var svgRoot = path.ownerSVGElement 
 

 
\t var segList=path.pathSegList 
 
\t var segs=segList.numberOfItems 
 
\t //---change segObj values 
 
\t for(var k=0;k<segs;k++) 
 
\t { 
 
\t \t var segObj=segList.getItem(k) 
 

 
\t \t if(segObj.x && segObj.y) 
 
\t \t { 
 
\t \t \t var mySVGPoint = svgRoot.createSVGPoint(); 
 
\t \t \t mySVGPoint.x = segObj.x 
 
\t \t \t mySVGPoint.y = segObj.y 
 
\t \t \t mySVGPointTrans = mySVGPoint.matrixTransform(sCTM) 
 
\t \t \t segObj.x=mySVGPointTrans.x 
 
\t \t \t segObj.y=mySVGPointTrans.y 
 
\t \t } 
 

 
\t \t if(segObj.x1 && segObj.y1) 
 
\t \t { 
 
\t \t \t var mySVGPoint1 = svgRoot.createSVGPoint(); 
 
\t \t \t mySVGPoint1.x = segObj.x1 
 
\t \t \t mySVGPoint1.y = segObj.y1 
 
\t \t \t mySVGPointTrans1 = mySVGPoint1.matrixTransform(sCTM) 
 
\t \t \t segObj.x1=mySVGPointTrans1.x 
 
\t \t \t segObj.y1=mySVGPointTrans1.y 
 
\t \t } 
 
\t \t if(segObj.x2 && segObj.y2) 
 
\t \t { 
 
\t \t \t var mySVGPoint2 = svgRoot.createSVGPoint(); 
 
\t \t \t mySVGPoint2.x = segObj.x2 
 
\t \t \t mySVGPoint2.y = segObj.y2 
 
\t \t \t mySVGPointTrans2 = mySVGPoint2.matrixTransform(sCTM) 
 
\t \t \t segObj.x2=mySVGPointTrans2.x 
 
\t \t \t segObj.y2=mySVGPointTrans2.y 
 
\t \t } 
 
\t } 
 
\t //---force removal of transform-- 
 
\t path.setAttribute("transform","") 
 
\t path.removeAttribute("transform") 
 
} 
 

 
//---changes all transformed points to screen points--- 
 
function screenPolygon(myPoly) 
 
{ 
 
\t var sCTM = 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(sCTM) 
 
\t \t pointsList.getItem(m).x=mySVGPointTrans.x 
 
\t \t pointsList.getItem(m).y=mySVGPointTrans.y 
 
\t } 
 
\t //---force removal of transform-- 
 
\t myPoly.setAttribute("transform","") 
 
\t myPoly.removeAttribute("transform") 
 
}