which inherits from
The use element simply emulates another existing element. Any changes on the master element will be reflected on all the
use instances. The usage of
use() is very straightforward:
var rect = draw.rect(100, 100).fill('#f09') var use = draw.use(rect).move(200, 200)
In the case of the example above two rects will appear on the svg drawing, the original and the
use instance. In some cases, you might want to hide the original element. The best way to do this is to create the original element in the defs node:
var rect = draw.defs().rect(100, 100).fill('#f09') var use = draw.use(rect).move(200, 200)
In this way, the rect element acts as a library element. You can edit it, but it won't be rendered.
Another way is to point an external SVG file, just specified the element
id and path to file.
var use = draw.use('elementId', 'path/to/file.svg')
This way is useful when you have complex images already created.
Note that, for external images (outside your domain) it may be necessary to load the file with XHR.