Basic events

returns itself

Events can be bound to elements as follows: {
  this.fill({ color: '#f06' })

Removing it is quite as easy:

All available other events are: click, dblclick, mousedown, mouseup, mouseover, mouseout, mousemove, touchstart, touchmove, touchleave, touchend and touchcancel...

Event listeners

returns itself

Fire an event:

Optionally, an object with arbitrary data can be passed as the second argument:, { arbitrary: data })


returns event

When a given event is fired using fire(), the passed event will be stored locally. The event() method provides access to that stored event:

var event = element.event()


returns itself

var click = function() {
  this.fill({ color: '#f06' })

element.on('click', click)

Note: The context of this in the callback is bound to the element. You can change this context by applying your own object:

element.on('click', click, window) // context of this is window

returns itself

Unbinding events is just as easy:'click', click)

Or to unbind all listeners for a given event:'click')

Or even unbind all listeners for all events:

Other elements

Adding and removing event listeners from elements also works on other elements


SVG.on(window, 'click', click), 'click', click)

Custom events

You can even use your own events.

Just add an event listener for your event:

element.on('myevent', function() {

Now you are ready to fire the event whenever you need:

function whenSomethingHappens() {'myevent')

// or if you want to pass an event
function whenSomethingHappens(event) {

You can also pass some data to the event:

function whenSomethingHappens() {'myevent', {some:'data'})

element.on('myevent', function(e) {
  alert(e.detail.some) // outputs 'data'

SVG.js supports namespaced events following the syntax event.namespace.

A namespaced event behaves like a normal event with the difference that you can remove it without touching handlers from other namespaces.

// attach
element.on('myevent.namespace', function(e) {
  // do something

// detach all handlers of namespace for myevent'myevent.namespace')

// detach all handlers of namespace'.namespace')

// detach all handlers including all namespaces'myevent')

However, you can't fire a specific namespaced event. Calling'myevent.namespace') won't do anything while'myevent') works and fires all attached handlers of the event

Important: always make sure you namespace your event to avoid conflicts. Preferably use something very specific. So event.wicked for example would be better than something generic like event.svg.

Fork me on GitHub