On Fri, Apr 28, 2017 at 3:16 AM, Steve Litt <slitt@...2357...> wrote:

> I don't know of any documentation on this, but it is something I plan
> to eventually cover in my tutorial series in Full Circle Magazine (see
> inkscapeforum.com for links to the previous 60 instalments!).
>
> I have put a file up on my website to show you the basics, though:
> http://peppertop.com/interactive.svg

If anybody is *at all* interested in interactive SVG, they should
download, use, and completely examine the preceding link, both in
Inkscape and in an editor. The preceding link is one of the best pieces
of teaching content I've ever seen, and it's my business to create
teaching content.

Thanks, I'm glad you found it helpful.


Is there anything like AJAX in SVG?

It's not a question of AJAX in SVG - it's a question of the capabilities of the JavaScript engine on the user agent that's being used to view the SVG. When using a browser, therefore, you pretty much have access to all the same JS capabilities as an HTML page would.

I've put another example up on my site:

http://peppertop.com/clock.svg

This one uses a JavaScript fetch() call (the new replacement for XMLHttpRequest()) to retrieve a value from a web API that just returns the current number of *minutes* past the Unix epoch. I then parse the response (skipping over all the checks that I *should* be doing!), convert it into milliseconds, and use it to seed a new JavaScript Date object.

From there I extract the hour and minutes of the Date, then use that information to set the a transform attribute on the hands of the clock, rotating them to the right position.

If you really want a clock, this isn't the best way to do it (just using a JS Date with no seed would give you the local time, for a start), but it does demonstrate making a request to a URL, receiving a reply, then using that data to update the DOM of an SVG image. There are a few comments in the code to point you in the right direction if you need to deal with JSON or binary data. The only code is in the Document Properties this time.

The clock will update each time you refresh the page, or every 5 mins otherwise, with a resolution of 1 minute (as that's all the web API supports).


Mark