What is the most effective way to 'expand' a polygon in SVG?

Question

I have a polygon element in my SVG file. It actually is a clipping path for a floor plan of an apartment. Currently the clipping path doesn't capture the walls of the floor plan and I need it to do so.

Is there a way to 'expand' the polygon by some value? I've tried scaling it from center with transform=translate() scale(), but the effect is different from 'expanding'.

To illustrate the issue, here is a picture:

The original polygon is filled with gray and I have the coordinates for the blue points. I want the polygon to become like dashed black one and get the coordinates of the green points.

Answer 1

As you have already pointed out, scaling is not the answer - unless you are happy with a very rough-fitting clip.

A simpler solution (than trying to manipulate the polygon coordinates) is to change the clip-path to a mask and draw the polygon with a stroke thick enough to reveal your walls.

Answer 2

Your polygon is not a convex polygon, therefore its 'center' for scaling is best chosen from the center of its bounding box. You can compute the scale based on how many units you want the larger polygon to exceed the original polygon. myPolygon is a clone of your base polygon. I edited this to fix a few typos. Sorry:( ... In the future I'll use jsFiddle.

    var myScale=1.025
    var myPolygon=basePolygon.cloneNode(true)
//---append to you root SVG---
mySVG.appendChild(myPolygon) 
    var bb=myPolygon.getBBox()
    var bbx=bb.x
    var bby=bb.y
    var bbw=bb.width
    var bbh=bb.height
    var cx=bbx+.5*bbw
    var cy=bby+.5*bbh

    myPolygon,setAttribute("transform","translate("+(cx)+" "+(cy)+")scale("+myScale+")translate("+(-cx)+" "+(-cy)+")")

Then to return the screen points of the scaled polygon(myPoly). (the mySVG is the root svg)

//---changes all transformed points to screen points---
function screenPolygon(myPoly,mySVG)
{
    var sCTM = myPoly.getCTM()
    var pointsList = myPoly.points;
    var n = pointsList.numberOfItems;
    for(var m=0;m<n;m++)
    {
        var mySVGPoint = mySVG.createSVGPoint();
        mySVGPoint.x = pointsList.getItem(m).x
        mySVGPoint.y = pointsList.getItem(m).y
        mySVGPointTrans = mySVGPoint.matrixTransform(sCTM)
        pointsList.getItem(m).x=mySVGPointTrans.x
        pointsList.getItem(m).y=mySVGPointTrans.y
    }
    //---force removal of transform--
    myPoly.setAttribute("transform","")
    myPoly.removeAttribute("transform")
}