在SVG中“扩展”多边形的最有效方法是什么？

Question

我的SVG文件中有polygon个元素。它实际上是公寓平面图的剪切路径。目前，剪切路径不会捕获平面图的墙壁，我需要这样做。

有没有办法通过某种值“扩展”多边形？我尝试用transform=translate() scale()从中心缩放它，但效果与'扩展'不同。

为了说明这个问题，这是一张图片：

原始多边形用灰色填充，我有蓝色点的坐标。我希望多边形变成黑色虚线，并获得绿点的坐标。

Answer 1

正如您已经指出的那样，缩放不是答案 - 除非您对非常粗糙的剪辑感到满意。

一个更简单的解决方案（比试图操纵多边形坐标）是将剪辑路径更改为一个蒙版，并用足够大的笔触绘制多边形以显示墙壁。

Answer 2

您的多边形不是凸多边形，因此其缩放的“中心”最好从其边界框的中心选择。您可以根据希望较大多边形超过原始多边形的单位数来计算比例。 myPolygon是基本多边形的克隆。我编辑了这个来解决一些拼写错误。对不起:( ...将来我会用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)+")")

然后返回缩放多边形（myPoly）的屏幕点。 （mySVG是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")
}