how to change svg polygon size by update it's points in js

how to change svg polygon size by update it's points in js

matrixTransform

https://stackoverflow.com/questions/40493506/get-updated-polygon-points-after-transformations-svg

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")
}

    var sCTM = this.poly.getCTM();
    // SVGMatrix
    var svgRoot = this.poly.ownerSVGElement;
    // svg
    var mySVGPoint = svgRoot.createSVGPoint();
    // SVGPoint {x: 0, y: 0}
    log(`sCTM`, sCTM);
    log(`svgRoot`, svgRoot);
    log(`mySVGPoint`, mySVGPoint);

matrix transforms

https://stackoverflow.com/questions/38525536/svg-polygon-scale-and-set-points-accordingly

Convert SVG polygon points to path

https://stackoverflow.com/questions/16245712/convert-svg-polygon-points-to-path

var points="270,328 270,376 342,376 342,368 358,368 358,320 314,320 298,336 278,336"

var p = points.split(/\s+/);
var path = "";
for( var i = 0, len = p.length; i < len; i++ ){
    path += (i && "L" || "M") + p[i]
}

console.log( path )
=> M270,328L270,376L342,376L342,368L358,368L358,320L314,320L298,336L278,336 

C#

https://stackoverflow.com/questions/11263936/changing-a-polygons-points

---

demo

  getMinPoint() {
    const {
      x,
      y,
    } = this.getBoxSize();
    return {
      x,
      y,
    };
  }
  getMaxPoint() {
    const {
      x,
      y,
      width,
      height,
    } = this.getBoxSize();
    return {
      x: x + width,
      y: y + height,
    };
  }
  getSize() {
    const {
      width,
      height,
    } = this.getBoxSize();
    return {
      width,
      height,
    };
  }
  zoomWidth(w) {
    // 除最小点, 其他点 x 增大
    var sCTM = this.poly.getCTM();
    // SVGMatrix
    var svgRoot = this.poly.ownerSVGElement;
    // svg
    var mySVGPoint = svgRoot.createSVGPoint();
    // SVGPoint {x: 0, y: 0}
    log(`sCTM`, sCTM);
    log(`svgRoot`, svgRoot);
    log(`mySVGPoint`, mySVGPoint);
    const box = this.getBoxSize();
    const min = this.getMinPoint();
    const max = this.getMaxPoint();
    log(`box size`, box, min, max);
    log(`poly points`, this.poly.points);
    // log(`poly points`, this.poly.getAttribute(`points`));
    // 放大 width
    const points = [];
    [...this.poly.points].forEach(point => {
      const {
        x,
        y,
      } = point;
      const px = (x === min.x) ? x : x + w;
      if(x === min.x) {
        log(`min point x`, point)
      }
      const py = y;
      points.push(px, py);
    });
    this.poly.setAttribute(`points`, points.join(` `));
  }

---

d3

https://stackoverflow.com/questions/49261369/update-polygon-when-points-change-in-d3

zrender

mapbox

canvas

---