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

【问题标题】：What is the most effective way to 'expand' a polygon in SVG?在 SVG 中“扩展”多边形的最有效方法是什么？
【发布时间】：2014-01-21 15:43:12
【问题描述】：

我的 SVG 文件中有一个 polygon 元素。它实际上是公寓平面图的剪切路径。目前，剪切路径无法捕捉平面图的墙壁，我需要它来捕捉。

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

为了说明问题，这里有一张图片：

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

【问题讨论】：

你觉得transform="scale(2)" 和扩展有什么不同？
@Robert Longson：我认为 Francis Hemsher 的回答对此给出了解释。

标签： svg vector-graphics

【解决方案1】：

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

一个更简单的解决方案（比尝试操纵多边形坐标）是将剪辑路径更改为蒙版，并使用足够粗的笔划绘制多边形以露出墙壁。

【讨论】：

我也在考虑使用笔画宽度。我试试看。

【解决方案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 是根 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")
}

【讨论】：

感谢学习新术语 - '凸'！