変換後のポリゴンポイントの更新を取得する（SVG）

Question

変換を適用した後にSVGポリゴンでポイントを更新するための関数やメソッドはありますか？私はJavaScriptで変換を行っていますが、変換後も同じ点に気づきました。

function drawPolygon(){ 

    var points = "100,100 200,100 200,200 100,200"; 
    var polygon = document.createElementNS(svgURL, "polygon"); 
    polygon.setAttribute("style", "fill: gray; stroke: black; stroke-width: 1; cursor: pointer;"); 

    polygon.setAttribute("points", points); 

    mySVG.appendChild(polygon); 

    console.log(polygon.points); 
    // Points: 100,100 200,100 200,200 100,200 

    polygon.setAttribute("transform", "translate(200,0)"); 

    console.log(polygon.points); 
    //Points: 100,100 200,100 200,200 100,200 
} 

どのように私は次のように更新ポイントを得ることができます：300、100、400、100 400、200 300、200または更新されたポイントを他のポリゴンを取得しますか？

編集：

<svg id="my_svg" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="300px" height="300px" viewBox="-150 -150 300 300" style="background-color: lightblue"> 

</svg> 

function drawRoom(){ 

    var points = "-100,0 100,0 100,100 -100,100"; 

    var polygon = document.createElementNS(svgURL, "polygon"); 
    polygon.setAttribute("style", "fill: gray; stroke: black; stroke-width: 1; cursor: pointer;"); 

    polygon.setAttribute("points", points); 

    mySVG.appendChild(polygon); 

    //Points: "-100,0 100,0 100,100 -100,100"; 
    polygon.setAttribute("transform", "translate(0,-50)"); 

    screenPolygon(polygon); 

    //Points should be: "-100,-50 100,-50 100,50 -100,50" if I apply function provided by Francis 

    //But points are: "50, 100 250,100 250,200 50,200" 

} 

polygon after transformation

：私たちはビューボックスを持っていない場合はフランシスHemsherから最初の答えは、うまく機能している今、私は問題を抱えている、私は私のSVGでのビューボックスを持っています

polygon after apply function screenPolygon(myPoly)

図1のような更新されたポイントを取得するにはどうすればよいか知っていますか？おかげ

Answer 1

は、以下のことを試してみてください。

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") 
 
}