Skip to main content

MotionPathHelper.editPath

MotionPathHelper.editPath( path:Element | String, config:Object ) : PathEditor

Makes an SVG <path> editable in the browser.

Parameters

  • path: Element | String

    The <path> element to be edited. This can be a reference to the element or selector text.

  • config: Object

    An optional configuration object for defining things like onPress, onRelease, handleSize, selected, draggable, etc.

Returns : PathEditor​

A PathEditor object

Details​

Makes an SVG <path> editable in the browser.

Simple example​

MotionPathHelper.editPath("#my-path");

Advanced example​

MotionPathHelper.editPath("#my-path", {
  handleSize: 7,
  selected: true,
  draggable: true,
  onPress: () => console.log("pressed"),
  onRelease: () => console.log("released"),
  onUpdate: () => console.log("updated"),
  onDeleteAnchor: () => console.log("deleted anchor"),
});

Demo​

loading...

Configuration​

You can optionally pass in a vars parameter to further configure the path editor. It's an object and can include any of the following properties:

PropertyDescription
draggableBoolean - determines if the path should be selected initially.
handleSizeNumber - The radius of the anchor points/handles
onDeleteAnchorFunction - A callback function that should be called when an anchor point is deleted.
onPressFunction - A callback function that should be called when an anchor or the path is pressed (mousedown/pointerdown/touchstart)
onReleaseFunction - A callback function that should be called when the mouse/pointer is released (mouseup/pointerup/touchend/touchcancel)
onUpdateFunction - A callback function that should be called when the path is updated in any way
selectedBoolean - Whether or not the path will be selected initially.
tip

Editing tips​

  • Add point: ALT-Click somewhere on the path
  • Toggle smooth/corner anchor: ALT-Click the anchor
  • Get handle from corner anchor: ALT-Drag
  • Select multiple anchors: SHIFT-Click (and again to deselect)
  • Delete anchor: select it, then press DELETE key.
  • Undo: CTRL-Z
  • Click and drag on handles to change how the path curves.
  • Drag entire path: Click and drag on a part of the path that doesn't have an anchor

Contents