svg.patheditor.js

An extension for svg.js which allows editing paths with the mouse (Inspired by @svgdotjs/svg.select.js and @svgdotjs/svg.resize.js).

Getting Started

• Install svg.js and svg.select.js using npm:

  npm i @svgdotjs/svg.js svg.patheditor.js

• Or get it from a cnd:

  <script src="https://unpkg.com/@svgdotjs/svg.js"></script>
  <script src="https://unpkg.com/svg.patheditor.js"></script>

Demo

Fork the repo, clone it, run npm install and npm run dev to try it out.

Usage

• Use showControls on a path to show the control points and handles:

  let canvas = new SVG().addTo('body').size(500, 500)
  let path = canvas.path('M10 50 C50 100 100 10 100 50').showControls()

• Use manipulate to allow dragging around the control points and handles:

  let canvas = new SVG().addTo('body').size(500, 500)
  let path = canvas.path('M10 50 C50 100 100 10 100 50').showControls().manipulate()

• To disable, pass false to either showControls or manipulate:

  path.manipulate(false)
  path.showControls(false)

Adaptation

You can pass in your own PathSelectHandler or PathManipulator (warning: this feature may disappear)

You can override the styles of the control points, control handles and their stalks with the following classes:

For Arcs, we have control handles for rx, ry and the arc's rotation

Each control point and handle also gets a cpid identifier attribute composed of the segment (path command) number and the point's purpose. For this, we follow the naming conventions of the SVG specification in Chapter 9: Paths.

E.g. the path shown above is an absolute cubic Bézier curve with the following definition:

M10 50 C50 100 100 10 100 50

There are two segments (path commands) in this path: an absolute moveto M and an absolute cubic Bézier curve C.

In the specs, M has an x and y argument, and C has x1 y1 x2 y2 x and y arguments. This is reflected in the cpid attributes places on the controls:

We add additional classes to reflect the type of control

Issues and open points

• We currently handle only one set of arguments per segment. E.g. for the example path, we only have M x y and C x1 y1 x2 y2 x y, but the path specification allows multiple sets of arguments: M (x y)+ and C (x1 y1 x2 y2 x y)+
  Fixing this will affect the format of the cpid attribute values
• Smooth quadratic curves (T or t) don't have their own control handles as the control point is assumed to be the reflection of the control point on the previous command relative to the current point. We draw this reflected point in gray, but unfortunately, these reflected points are not always drawn in the correct position. To be fixed.

• Currently the only way to affect the manipulation is to pass your own PathManipulation class. We plan to replace this with callbacks so you can e.g. limit movement of the control points and handles to the horizontal or the vertical axis; constraint the manipulations to a grid; etc