Morph + xlink

[Lagden 2 Likes (Newbie)]

Hello,
 
I am trying to make a morph using <use xlink:href="#ID">
But I don't know how convert it or if is possible...
 
Here is a normal example:

See the Pen WxNyzO by lagden (@lagden) on CodePen

 
Here is a example using xlink:

See the Pen GqRGoR by lagden (@lagden) on CodePen

 
The expected on second example is:
Morph circle to square when user click on element, but show this message at console: WARNING: cannot morph a <USE> SVG element. Use MorphSVGPlugin.convertToPath(elementOrSelectorText) to convert to a path before morphing.

 

Regards,

Thiago Lagden

See the Pen c9e3da6ae27e712b6bf6091935ed4cc2 by osublake (@osublake) on CodePen

[OSUblake 9,990 Likes (Superhero)]

<use> elements are encapsulated, so you're really limited with what you can change for each instance. Basically CSS related stuff...

https://www.w3.org/TR/SVG/propidx.html

 

I'd just put what you want to reuse in some defs and clone them.   

[Lagden 2 Likes (Newbie)]

 

I thought that we'd simple solution!

I already knew about use with css, because I did a 

See the Pen QjQbwp by lagden (@lagden) on CodePen

 like Google Material Design using GSAP.

 

So, I did cloning SVG element and the result was good:

See the Pen PzoLbK by lagden (@lagden) on CodePen

 

 

Thanks for reply @OSUblake

 

 

[OSUblake 9,990 Likes (Superhero)]

Oh yeah. I remember you asking that question, but now your ripples are broke due to some changes with node lists. I noticed that rest params don't work anymore either.

[...document.querySelectorAll(".btn")].map(el => { //... });

Easy fix though. Use the new Array.from method.

const btns = Array.from(document.querySelectorAll('.btn'));

See the Pen c9e3da6ae27e712b6bf6091935ed4cc2 by osublake (@osublake) on CodePen

 

EDIT: Haha! I see you are already using that in your morphing example.