search

adobe-webplatform / Snap.svg

The JavaScript library for modern SVG graphics.
http://snapsvg.io
Apache License 2.0
13.95k stars 1.15k forks source link

Create Arbitrary Child of Element #404

Open jkillian opened 9 years ago

jkillian commented 9 years ago

Is there a way to create an arbitrary element of an Element? The only way to do this I could find was this:

Snap.plugin(function (Snap, Element, Paper, global) {
      Element.prototype.el = Paper.prototype.el;
});

I want to create an animateTransform element inside of a path but can't figure out a good way to do it.

ibrierley commented 9 years ago

You could possibly do something like...

Paper.prototype.markupAnimateTransform = function( attr ) { return this.el('animateTransform').attr( ); };

Be aware, animating by animateTransform tag/element can be hit and miss, I think Firefox has some issues with it in some cases, so its likely not the way to go in many cases, where its best to use Snap animation instead. But there are a couple of cases where you want it in an svg image or something. Just make sure you are using it when you couldn't use Snap for the animation.

jkillian commented 9 years ago

Thanks for the advice @ibrierley. I actually could use Snap for the animation in all cases, I just figured using the animateTransform tag would be more performant (not Snap's fault on that).

ibrierley commented 9 years ago

No problem, just be aware of the compatibility issues (thinking about it, I'm not sure IE9/10 support it either, you may want to check, if it a requirement for you).

If performance is key, you may want to look at css (or combining with Velocity.js is straightforward, but it does mean another lib).

jkillian commented 9 years ago

Yeah, no version of IE supports animateTransform, and unfortunately IE also don't support CSS animations for SVG elements either. So when it comes to them, basically have to use library like Snap :smiley: