Animating to create a transition between different SVGs with elements that have the same IDs

[mikesol]

Hey forum!

I'm looking for strategies to animate between different SVGs with the same IDs for elements.  For example, if I have:

<svg id="svg1">
<circle id="foo" cx="50" cy="50" r="40" stroke="black" stroke-width="3"fill="red" />
<rect id="bar" width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>

and

<svg id="svg2">
<circle id="foo" cx="100" cy="20" r="70" stroke="black" stroke-width="3"fill="red" />
<rect id="bar" width="25" height="1000" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>

is there a way that GSAP can recognize similar elements in the two SVGs and animate between them?  I ask this because I am working with a piece of software (GNU LilyPond) that can create SVGs of musical scores with the elements id'd and I'd like to animate between similar scores that have just a few changes (for example, notes of different sizes, some notes higher, some lower, etc.).  Otherwise I can write a parser that harvests this data from the SVGs and pumps them into GSAP's JavaScript API, but this is a bit of a pain.

[Jonathan]

Hello mikesol, and Welcome to the GreenSock forum!

 

In HTML and SVG  you should never have multiple elements with the same ID. An ID is a unique Identifier and only one element should have that specific ID name. In HTML the id is also associated with the name attribute, namespace. In that case you should just use a class name instead or just append a number to your id names.

 

W3C spec global attributes - id: http://www.w3.org/TR/2012/WD-html5-20121025/global-attributes.html#the-id-attribute

 

id:

• A unique identifier for the element.
• There must not be multiple elements in a document that have the same id value.
• Any string, with the following restrictions:
  • must be at least one character long
  • must not contain any space characters

But I think what you are looking for is the GSAP MorphSVGPlugin That will allow you to morph between 2 different SVG paths or shapes.

 

MorphSVGPlugin Docs: http://greensock.com/docs/#/HTML5/GSAP/Plugins/MorphSVGPlugin/

 

 

Let us know if you have any more questions?

[mikesol]

Thanks for the helpful reply - I will proceed in this direction!