Most design tools add
id attributes to each named layer, simply search/replace it to
data-spirit-id and the elements are
correctly configured to work with Spirit.
<html> <body> <svg viewBox="0 0 500 500"> <g data-spirit-id="cube"> <rect width="50" height="50" data-spirit-id="front" /> <rect width="50" height="50" data-spirit-id="back" /> <rect width="50" height="50" data-spirit-id="left" /> <rect width="50" height="50" data-spirit-id="right" /> </g> </svg> </body> </html>
data-spirit-id attribute to every element you like to animate.
The web player needs to find out which part of the animation data belongs to which element. By adding the
attribute to elements you ensure the right element gets resolved for animation.
Note that the
data-spirit-idattribute needs to be unique, hence the name
By default Spirit resolves elements using XPath.
A XPath expression might look something like
section/div/span, describing the location in the document.
The downside of using XPath as an element resolver is that it heavily depends on the tree hierarchy. Any runtime modifications of the document regarding to the element or its anchestors might result in resolving the incorrect element.
To illustrate how XPath works, here's an example using
article/div/p as the expression:
<article> <h1>Foo title</h1> <div> <p>Foo</p> </div> </article> <article> <!-- article --> <h1>Bar title</h1> <div> <!-- div --> <p>Bar</p> <!-- p --> </div> </article>
article, it targets the second article element
div, it targets the first div element
p, it targets the first p element