svg.resize.js

Appearance

Examples ​

This page shows usage of the select and resize library

Normal resizing ​

ts
new SVG()
  .addTo("#polygon_normal")
  .size("100%", "100%")
  .polygon("350,50 283,250 450,122 250,122 416,250")
  .select()
  .pointSelect()
  .resize();

Resizing with grid and degree ​

ts
new SVG()
  .addTo("#polygon_snap")
  .size("100%", "100%")
  .polygon("350,50 283,250 450,122 250,122 416,250")
  .select()
  .pointSelect()
  .resize({ grid: 20, degree: 15 });

Snaps on ctrl down ​

ts
var poly = new SVG()
  .addTo("#polygon_ctrl")
  .size("100%", "100%")
  .polygon("350,50 283,250 450,122 250,122 416,250")
  .select()
  .pointSelect()
  .resize();

window.addEventListener("keydown", function (e) {
  if (e.keyCode == 17) {
    poly.resize({ grid: 20, degree: 15 });
  }
});

window.addEventListener("keyup", function (e) {
  if (e.keyCode == 17) {
    poly.resize({ grid: 1, degree: 0.1 });
  }
});

Preserve aspect ratio ​

ts
new SVG()
  .addTo("#polygon_preserve")
  .size("100%", "100%")
  .polygon("350,50 283,250 450,122 250,122 416,250")
  .select()
  .resize({ preserveAspectRatio: true });

Scale around center ​

ts
new SVG()
  .addTo("#polygon_center")
  .size("100%", "100%")
  .polygon("350,50 283,250 450,122 250,122 416,250")
  .select()
  .resize({ preserveAspectRatio: true, aroundCenter: true });

Custom handles ​

ts
new SVG()
  .addTo("#polygon_custom_handles")
  .size("100%", "100%")
  .polygon("350,50 283,250 450,122 250,122 416,250")
  .select({
    createHandle: (group) => group.rect(10, 10).css({ fill: "red" }),
    updateHandle: (shape, p) => shape.center(p[0], p[1]),
  })
  .pointSelect({
    createHandle: (group) => group.circle(10).css({ fill: "blue" }),
    updateHandle: (shape, p) => shape.center(p[0], p[1]),
  })
  .resize();