1

I'm loading 2 embedded svg-lets in a page. One animated one not. They're loaded in sequence with a setTimeout. When I load the animated first all goes well, the animation starts as expected and the second static svg is correctly displayed afterwards. When I first load the second, and afterwards the animated one, the animation does not start.

Code is here: jsfiddle switch #svg1, and #svg2 in the javascript.

Upon browser checking I found out this is probably a webkit bug as chrome and safari both show this behavior FF 12 and Opera are well.

Can this be fixed with JS code or should I file a bug with webkit?

== Added

I think the question should be rephrased why the animation does not start after the svg is loaded with a settimeout.

As Jared investigated below it works when the element is present in the DOM and is reordered via dom manipulation into the focus element, Chrome and webkit need a kick with a beginElement() call to the animate element. This still doesn't work out for elements constructed from plain text. As I only do have a mac and I still consider this a hobby project I leave MS IE completely out of the loop.

dr jerry
  • 9,768
  • 24
  • 79
  • 122

1 Answers1

1

Well, it took quite a bit longer than I anticipated, but I got it worked out. Basically, the method you were using with the semi-SVG and the regex on the markup, etc., was to say the least not quite the way to get it done.

The answer is to use svg DOM animation methods and attributes, especially to start/stop the animation when you want it to run. Apparently, Firefox was just fine with reinitializing the element and the animation just by manipulating the inner HTML/markup. Chrome (Webkit?), however, actually needs you to programmatically access and control the element. I have not checked in IE, Opera or Safari.

I redid the example, leaving out the arrow altogether, as it is unrelated to the problem. I instead concentrated on creating and testing the animation functionality. The critical points you were missing before were:

var $lasso = $('#lasso'),
    animater = $lasso.find('animate')[0],

...

animater.beginElement();

...

animater.endElement();

Here is the demo I made, which is significantly different that what you have in your question:

http://jsfiddle.net/9hBfs/

What I call the "lasso" effect is still there, though.

I would reference the Mozilla Developer Network (MDN) site, as they have a lot of great information and are a highly trusted authority:

Jared Farrish
  • 48,585
  • 17
  • 95
  • 104
  • Note, I have tested in Opera and it works beautifully. In IE9 it does not, giving *Object doesn't support property or method 'endElement'*. IE's `svg` support I'm not real clear on, but that wasn't entirely surprising. I'll see if I can find a workaround. – Jared Farrish Jun 10 '12 at 05:03
  • Thanks so much for investigating. The beginElement is indeed doing magic inside the settimeout. However my usecase is really about constructing the element out of a piece of text, which in my application, is read from an external external url, and than manipulated via regexp replaces. I learnt a lot from your contribution/effort once more thanks for that. I'm currently only aware to construct dom objects via innerHTML or jquery's $(') So maybe there are alternative ways. – dr jerry Jun 10 '12 at 11:43
  • I guess I don't know what to say? That's not a reason to use mangled markup (that's all I can see you're doing in the original fiddle). If you really, really need to do something that leads you to doing something exotic like regexing markup after page load and reinjecting it inplace, than I seriously suggest you move to a library like [jQuery SVG](http://keith-wood.name/svgRef.html), or [Raphael](http://raphaeljs.com/). And then use those libraries to work with the DOM elements. But you shouldn't be regexing markup like that, it's bad for your health. `:)` – Jared Farrish Jun 10 '12 at 11:54
  • See this question for a comparison of the libraries: http://stackoverflow.com/a/2381953/451969 – Jared Farrish Jun 10 '12 at 11:59
  • Yeah I do understand. I also apologize for not making it more clear that the regex fiddling was a kind of substitue for my own real usecase. I'm getting more eyebrows raised, however I'm quite confortable with regex. I'm currently working on a project (www.iscriptdesign.com) which is heavily using this feature, and to which I want to add animation. – dr jerry Jun 10 '12 at 12:15
  • Just because you know how to use regex doesn't mean you should wedge them into every problem you need a solution. Do it right. If you can regex, you can learn to use DOM methods and fancy libraries. – Jared Farrish Jun 10 '12 at 12:17
  • You've got jQuery SVG already on your site; why aren't you using it for this? Did you run into an issue that forced you to fallback on your current method? – Jared Farrish Jun 10 '12 at 12:21
  • Well regex/replacing is used were needed , especially for manipulating the path's d-attribute. Regarding JQuery SVG, I found this library more and redundant as JQuery at default is now more capable of handling SVG (or browsers have been adapted), The remaining functionality will now be incorporated in my website, so I can do animation and I can ditch a library. This is all part of major rewrite. – dr jerry Jun 10 '12 at 13:53
  • Alright, well how about using templates that are not parsed until you append them to an element? With a template technique, you'd at least be able to markup what you wanted replaced a la `{path-dimensions}`. – Jared Farrish Jun 10 '12 at 14:54
  • Yes definitely I saw a presentation by "the" Michael Bostock at the SVG Open in MA last year, that was quite impressive http://mbostock.github.com/d3/talk/20111018/#0 , my feeling is that is more directed to charting/graphing, whereas I'm more interested in blueprints, modeling and customizable design. However D3 is still on my todo list, in combination with a nice Rest Server framework. – dr jerry Jun 11 '12 at 13:24
  • @drjerry - That's sounds a lot like a browser-based Blender (maybe being totally off, too). That makes me think of [three.js](http://mrdoob.github.com/three.js/), with an interface similar to [ThreeFab](http://blackjk3.github.com/threefab/); see the screenshots [here](https://github.com/blackjk3/threefab#readme). Of course, that project is more in the area of motion graphics and I think you're more in the area of 3D printing a la [Makerbot](http://www.makerbot.com/). [TinkerCAD](https://tinkercad.com/home/) maybe? – Jared Farrish Jun 11 '12 at 14:04
  • Yep makerbot, tinkercad are "big" competitors. I'm more in the field of cutting out 2D sheets and to "press fit", fold, sew or glue them into 3D objects. By manipulating certain dimension parameters in the 2D sheets, I do achieve my customizable designs. Thanks for your interest btw, I hope to disclose an animated presentation soon, I'll let you know via this thread. – dr jerry Jun 12 '12 at 14:53
  • @drjerry - Oh ok, I think I've seen the kind of thing you're talking about. I'd like to see it when it's ready. – Jared Farrish Jun 13 '12 at 17:54
  • Hi my svg animation is ready, www.stretchsketch.com works on chrome, safari and firefox (only tested on mac, but chrome and firefox will likely start on windows as well) Unfortunately it is not running on the iPhone (4). Regards, – dr jerry Jun 19 '12 at 21:49
  • Hello. That looks pretty good. Does it have a menu or button to get to somewhere? It stops at "Customize your own gears & export to DXF for cnc fabrication." Also I noticed it's logging a couple hundred `console.log` calls, the last of which is `event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future`. – Jared Farrish Jun 20 '12 at 00:00
  • For now the it's only the intro. Buttons of exiting or skipping are needed as well of course and after the intro the menu or so should pop up again. Regarding the `event.layer...` messages, these are coming from jquery(-ui) as far as i can tell (it's a pretty popular question at SO) and the status of those message is currently unknown to me, it doesnt have my highest priority. First I would like it to work on the mobile safari versions. – dr jerry Jun 20 '12 at 07:34
  • Ok. I wasn't sure if that was somehow killing the script before you got the site, or if it was still a work in progress more or less. – Jared Farrish Jun 20 '12 at 07:44