[Inkscape-user] Javascript inside Inkscape

[Steve Litt]

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?

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');

If I removed the "node." from the second line above, that didn't work
either.

Thanks,

SteveT

Steve Litt
May 2017 featured book: Twenty Eight Tales of Troubleshooting
http://www.troubleshooters.com/28

[Maren Hachmann]

Post by Steve Litt
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").
In what program must I look at my SVG file in order to see the effects
of its internal javascript? Inkscape? Chromium? Something else?
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
msg = document.getElementById(tspanmsg);
msg.node.textContent('shunk');

- Maybe you need quotes around the id?

And yes, a web browser is the tool of choice to play javascript. It
doesn't work in Inkscape.
For troubleshooting and debugging javascript, you can use the browser
console.

Maren

Post by Steve Litt
If I removed the "node." from the second line above, that didn't work
either.
Thanks,
SteveT
Steve Litt
May 2017 featured book: Twenty Eight Tales of Troubleshooting
http://www.troubleshooters.com/28
------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
Inkscape-user mailing list
https://lists.sourceforge.net/lists/listinfo/inkscape-user

[John Baraclough]

Try this:

msg = document.getElementById('tspanmsg');
msg.innerHTML = 'New contents here.';

Best wishes,
John

Post by Steve Litt
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").
In what program must I look at my SVG file in order to see the effects
of its internal javascript? Inkscape? Chromium? Something else?
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
msg = document.getElementById(tspanmsg);
msg.node.textContent('shunk');
If I removed the "node." from the second line above, that didn't work
either.
Thanks,
SteveT
Steve Litt
May 2017 featured book: Twenty Eight Tales of Troubleshooting
http://www.troubleshooters.com/28
------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
Inkscape-user mailing list
https://lists.sourceforge.net/lists/listinfo/inkscape-user

[Steve Litt]

On Fri, 5 May 2017 09:17:53 -0400

Post by Steve Litt
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").
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.

Post by Steve Litt
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
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