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或获取具有更新点的另一个多边形？

编辑：Francis Hemsher的第一个答案是，如果我们没有查看框，那就很好了，现在我遇到了问题，我的svg中有一个viewbox：

<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

polygon after apply function screenPolygon(myPoly)

请知道如何获得如图1中的更新点，我知道视图框有事可做。感谢

Answer 1

尝试以下方法：

＆＃13;

function screenPolygon(myPoly)
{
	var sCTM = myPoly.getCTM()
	var svgRoot = myPoly.ownerSVGElement

	var pointsList = myPoly.points;
	var n = pointsList.numberOfItems;
	for(var m=0;m<n;m++)
	{
		var mySVGPoint = svgRoot.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")
}

＆＃13;

转换后获取更新的多边形点（SVG）

1 个答案: