Resolving elements

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.

Example

index.html

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

Best practise

Add 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 data-spirit-id attribute to elements you ensure the right element gets resolved for animation.

Note that the data-spirit-id attribute needs to be unique, hence the name data-spirit-id.

Fallback

By default Spirit resolves elements using XPath. A XPath expression might look something like section[2]/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.

Example

To illustrate how XPath works, here's an example using article[2]/div/p as the expression:

<article>
  <h1>Foo title</h1>
  <div>
    <p>Foo</p>
  </div>
</article>

<article>                  <!-- article[2] -->
  <h1>Bar title</h1>
  <div>                    <!-- div -->
    <p>Bar</p>             <!-- p -->
  </div>
</article>

article[2], it targets the second article element
div, it targets the first div element
p, it targets the first p element

Resolved element: <p>Bar</p>