Get updated polygon points after transformations (SVG)
<p>Is there any function or method to get updated points in a SVG polygon after applying transformations? I'm doing transformations in JavaScript and I noticed points still the same after transformations.</p>

<pre><code>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
}
</code></pre>

<p>How can I get updated points like: 300, 100, 400, 100 400, 200 300, 200 or get another polygon with updated points?</p>

<p>Edited: The first answer from Francis Hemsher is working well if we don't have a viewbox, now I'm having a problem, I have a viewbox in my svg:</p>

<pre><code>&lt;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"&gt;

&lt;/svg&gt;

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"

}
</code></pre>

<p><a href="https://i.stack.imgur.com/ZVfoW.png" rel="nofollow noreferrer">polygon after transformation</a></p>

<p><a href="https://i.stack.imgur.com/BoNcu.png" rel="nofollow noreferrer">polygon after apply function screenPolygon(myPoly)</a></p>

<p>Please do you know how can I get updated points like in figure 1, I know the viewbox have something to do. Thanks</p>