Basic events

returns itself

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

Removing it is quite as easy:

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

Event listeners


returns itself

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

rect.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:

rect.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

But there is more to event listeners. You can bind events to html elements as well:

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

Obviously unbinding is practically the same:, 'click', click)

Custom events

You can even use your own events.

Just add an event listener for your event:

rect.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'})

rect.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
rect.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