Javascript inside Inkscape

classic Classic list List threaded Threaded
4 messages Options
Reply | Threaded
Open this post in threaded view
|

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



------------------------------------------------------------------------------
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
[hidden email]
https://lists.sourceforge.net/lists/listinfo/inkscape-user
Reply | Threaded
Open this post in threaded view
|

Re: Javascript inside Inkscape

Maren Hachmann
Am 05.05.2017 um 15:17 schrieb 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');

- 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

> 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
> [hidden email]
> https://lists.sourceforge.net/lists/listinfo/inkscape-user
>


------------------------------------------------------------------------------
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
[hidden email]
https://lists.sourceforge.net/lists/listinfo/inkscape-user
Reply | Threaded
Open this post in threaded view
|

Re: Javascript inside Inkscape

John Baraclough
In reply to this post by Steve Litt
Try this:

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

Best wishes,
John


On 05/05/2017 14:17, Steve Litt 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?
>
> 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
>
>
>
> ------------------------------------------------------------------------------
> 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
> [hidden email]
> https://lists.sourceforge.net/lists/listinfo/inkscape-user
>


------------------------------------------------------------------------------
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
[hidden email]
https://lists.sourceforge.net/lists/listinfo/inkscape-user
Reply | Threaded
Open this post in threaded view
|

Re: Javascript inside Inkscape <SOLVED>

Steve Litt
In reply to this post by Steve Litt
On Fri, 5 May 2017 09:17:53 -0400
Steve Litt <[hidden email]> 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



------------------------------------------------------------------------------
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
[hidden email]
https://lists.sourceforge.net/lists/listinfo/inkscape-user