On Fri, 5 May 2017 09:17:53 -0400 Steve Litt <slitt@...2357...> wrote:
Hi all,
I've pretty much got it down for clickmapping with SVG elements using onmouseover, onmouseout and onclick to run Javascript from my HTML file. Now I'm trying to do the whole thing inside my SVG file, for simple stuff.
For instance, I have a text/tspan element and a rectangle. When I hover the rectangle I'd like the text to change (perhaps from "init" to "hovered").
A few questions:
In what program must I look at my SVG file in order to see the effects of its internal javascript? Inkscape? Chromium? Something else?
A browser. Thanks to Maren for cluing me in on that.
When doing javascript exclusively from within my SVG file, what syntax should I use in order to change the text in a tspan? The following failed to work, doing nothing:
msg = document.getElementById(tspanmsg); msg.node.textContent('shunk');
Thanks to John and Maren for pointing out that tspanmsg should have quotes.
For whatever reason, nothing I could do with msg in the preceding code, including removing the ".node", led to success. What worked was the following:
document.getElementById('tspanmsg').textContent = 'shunk';
textContent is an attribute, not a function.
I've put a reasonable all-in-svg clickable group example at:
http://troubleshooters.com/codecorn/clickmap/group_example.html
The Inkscape made SVG itself is at:
http://troubleshooters.com/codecorn/clickmap/images/flag.svg
Please be aware that http://troubleshooters.com/codecorn/clickmap/group_example.html uses <object/> to display the external SVG file, so it's browser dependent. It seems to work on XUL browsers, and fail miserably on Webkit browsers. For a more universal functionality, the <object/> could be replaced by a cut and paste of everything in the SVG file's <svg/> element. I have no Internet Explorer to test this on, but once embedded it worked on all XUL browsers, as well as Webkit browsers Midori, Surf, and Vimb.
I haven't yet tried Martin's Javascript .svg importer, so I can't say whether that would lead to the same kind of browser independence as just plain embedding. I'll let you all know as soon as I find out.
Anyway, if you want to check this stuff out, it's two wgets away, and looking at flag.svg in Inkscape is very revealing.
Thanks for all your help.
SteveT
Steve Litt May 2017 featured book: Twenty Eight Tales of Troubleshooting http://www.troubleshooters.com/28