Path unknown error.

[RUIFERNANDE5]

Hey friends,
Sorry if this is not the place for coding doubts or something, but I've wasted to many time already with this issue.

Here is a codepen i made.

I've already jumped to the conclusion the problem is within the svg itself, they are not morphing.
What could it be the problem? The shapes are quite simple, all have the same size and anchors and, as you guys say on your documentation, "closed shapes (their d attribute ends with z)."

[thednp]

I just checked your codepen and it works. What exactly is happening?

[RUIFERNANDE5]

The shapes are not morphing flawlessly? they should've transform one to another right? Like the examples you have "triangle to star", etc

[thednp]

You mean the information you get in your console? That is a feature to help you find the best morphIndex value.

[RUIFERNANDE5]

@thednp no mate, im aware of that. Its not an issue with the plugin I guess. However the shapes are not morphing, they are flipping or something

[thednp]

Are you a MAC?

[RUIFERNANDE5]

@thednp Yes I am

[thednp]

Please update your browser or get yourself a shiny new PC.

[thednp]

OR: you can try to use polyfills, check out my minifill.js

[RUIFERNANDE5]

@thednp Mate, I've tried the same code with your paths and it worked just fine. Im not sure what you're seeing, but I experience the same "flipping" motion both on windows, osx and chrome for android.
Thanks anw..

[thednp]

Check this on your machine and let me know how it goes.
http://codepen.io/thednp/pen/LkvOBk

[thednp]

I just tested with Safari 5.3.1 for Windows and it works, it's not perfect, but the script works. SO I don't know exactly what kind of a machine you have.

[RUIFERNANDE5]

@thednp please check it now, on another example. I'm creating a 5 step morphing (like a slider) and this is a clearer example of what's happening in one of the transitions;

[thednp]

Seems to be the same.

[RUIFERNANDE5]

@thednp http://codepen.io/RUIFERNANDE5/pen/AXzbEN

Tell me, exactly how is it a morphing motion? Now you have both paths to compare

[thednp]

I think your first shape might have a problem, not sure about it, I will have a look at it later.

[thednp]

I've removed the last point for each path, as long as they have z at the end, there is no need to tween an additional point, secondly I've tested morphing from second to first path and it works as expected.

http://codepen.io/thednp/pen/QEPmLa

For some reason, the first path has some render issue, I cannot say.

Keep in mind that this involves morphing polygon type of paths, something that is kind of beta feature for the SVG plugin. It's something that still needs some fine tuning and documenting. The reasons for this is that the current HTML working draft does not have any API for SVG, pathSeg is deprecated&removed, and the new pathData is not implemented yet. More info here.

I would recommend using only absolute values for your points (for instance L instead of l) and avoid using H and V path commands. This would assure the use of the plugin at maximum potential for fastest execution / best animation performance.

[RUIFERNANDE5]

Thanks a lot for your time, I'll definitely give a read on that. For now I think I can get along from here.

[RUIFERNANDE5]

Just one more thing, can you explain why the pen u created works from #n2 to #n1 but not the contrary?

[thednp]

I cannot explain but I know a workaround: edit the d attribute of #n1 to change the order of the points until you see it as you would expect it to look like. Then try to animate.

Update: also try edit your shapes to only have M,L for the d attribute. Somewhere in the function that tries to convert values to absolute (like l path command values become L path command values), there's a bug and I cannot figure it out.

[RUIFERNANDE5]

Would you please give an example on that?

[thednp]

See updated commend.

[RUIFERNANDE5]

@thednp do you recommend any svg relative to absolute convertor? can't find any (working).

Edit: I've tried your workaround and converted all paths to absolute, correct me if I'm wrong:
<path id="n0" style="visibility:hidden" fill="#D24627" d="M62,7.5L272,27.5L302,257.5L12,197.5L62,7.5Z"/> <path id="n1" style="visibility:hidden" fill="#D24627" d="M0,7.5L315,39.5L284,228.5L4,259.5L0,7.5Z"/> <path id="n2" style="visibility:hidden" fill="#D24627" d="M12,59L303,0L268,267L24,233L12,59Z"/><path id="n3" style="visibility:hidden" fill="#D24627" d="M10.5,2L304.5,65L251.5,192L100.5,265L10.5,2Z"/>

Seems not to work.

[thednp]

Try this and let me know.
http://jsbin.com/mudusiseta/1/edit?html,output

[RUIFERNANDE5]

I just tried this one. The paths I posted were converted from there

[thednp]

Yes, I tested myself http://codepen.io/thednp/pen/qNwoAE

Look I will reopen this and will try to find a fix asap, right now I am working on an update for bootstrap.native.

[RUIFERNANDE5]

@thednp appreciated.

[thednp]

I have some Javascript from Snap.SVG to do pathToAbsolute, cross-browser and with best accuracy, perhaps I will decide to go back to my previous version of the plugin, IDK, but this bug's gonna get squashed. I'm gonna test with your shapes to make sure it works perfect.

[thednp]

Problem solved. Demo http://codepen.io/thednp/pen/YWbpJo

[RUIFERNANDE5]

works like a charm, thanks buddy! +1

[thednp]

No problemo.