# Re-use Elements
use element allows reusing elements into the SVG. There are specific configuration
.height(), etc. The
.href() method enables
the reference on the element to be reused.
How the reference must be absolutely unique into the browser DOM and can have a collision between
two or more SVG included on the same page, gySVG provides an internal not duplicated
id for each
element. This unique identification can be access with the methods
.id() (return the id) and
# and the id concatenated).
In this example, we have defined only one
circle and nine
use referenced to the first circle.
use has a
.x() than translate the used element. When the
circle changes, all
change because those are linked.
If you want to define an element, but don't need to show it directly, you can use "defs" as a group of elements that have not been rendered in the SVG. It constitutes a group of non-visible definitions useful for use in other sites.
We can change the previous example and put the initial circle into the
If you want to reuse a group of shapes, you can group them into a
symbol element. It's very
similar to a
g, but is not rendered directly and needs a
use element to show its content. The
symbol are usually created within
defs, have own
.viewBox() bound reference, and its size is
.height(). Additionally, you can define the symbol's point as a
reference for positioning with
polygon accept markers at the beginning, at the end,
and vertices. These markers are commonly used to easily include dots, arrows, and other graphic
elements on the shapes.
markers are usually created within
defs, although they are not visualized by themselves.
They have their own
.viewBox(), and their size is defined by
.markerHeight(). It is also possible to define with .refX(), and .refY() the marker's point will
be used as a reference for positioning into shape's points.
.orient() method indicates how a marker is rotated when it is placed at its position
on the shape. It can be
'auto-start-reverse', and an angle value.
You can define the markets into a path with the methods
.marker_start (), and
.marker_end(). All these methods receive the structure
url(#id) with the unique id
defines on the marker.
gySVG provides an internal not duplicated
id for each element, and you can get this with
.url(). It returns
url(#id). This method simplifies using the unique id when it is necessary
to include the