How does the Interaction menu work (with javascript)?

Discuss SVG code, accessible via the XML Editor.
User avatar
fillotassi
Posts: 19
Joined: Wed Sep 06, 2017 11:47 pm
Location: Italy
Contact:

How does the Interaction menu work (with javascript)?

Postby fillotassi » Thu Sep 07, 2017 6:48 pm

Hello SVGscapers,

I'm learning to animate SVG through Inkscape and I can't understand what should be written in the forms of the interaction menu

Particularly, I can't manage targeting an #id (which is a <svg:g>) through a javascript linked inside the SVG. The script is working (I can execute a console.log(), but I'm probably getting something wrong using getElementById().

Can someone illuminate me?

Thanks

User avatar
Xav
Posts: 967
Joined: Fri May 08, 2009 1:18 am
Location: UK
Contact:

Re: How does the Interaction menu work (with javascript)?

Postby Xav » Thu Sep 07, 2017 7:16 pm

Have a look at the file I posted in this thread for an example: viewtopic.php?f=5&t=32834&p=100321#p100321
Co-creator of The Greys and Monsters, Inked - Inkscape drawn webcomics
Web SiteFacebookTwitter

User avatar
fillotassi
Posts: 19
Joined: Wed Sep 06, 2017 11:47 pm
Location: Italy
Contact:

Re: How does the Interaction menu work (with javascript)?

Postby fillotassi » Thu Sep 07, 2017 11:05 pm

Thanks Xav.

It's incredible how my file doesn't work

Can it be because I'm trying to set a style for a svg:path?

Is there some guide/tutorial/documentation?

User avatar
Xav
Posts: 967
Joined: Fri May 08, 2009 1:18 am
Location: UK
Contact:

Re: How does the Interaction menu work (with javascript)?

Postby Xav » Fri Sep 08, 2017 12:06 am

I'm not aware of any specific tutorials on this topic - that's not to say that there aren't any, but I don't know about them if there are. I do plan to write about this in my own tutorial series, but I won't get onto this topic for quite a while yet.

You definitely can set a style for a path. Without seeing your specific JavaScript, it's hard to guess what you might have done wrong. What are you trying to do to the path?
Co-creator of The Greys and Monsters, Inked - Inkscape drawn webcomics
Web SiteFacebookTwitter

User avatar
fillotassi
Posts: 19
Joined: Wed Sep 06, 2017 11:47 pm
Location: Italy
Contact:

Re: How does the Interaction menu work (with javascript)?

Postby fillotassi » Fri Sep 08, 2017 12:22 am

I probably understood my problem; I'm trying to target the thing itself, while your targeting something which folllows.

:-/

User avatar
Xav
Posts: 967
Joined: Fri May 08, 2009 1:18 am
Location: UK
Contact:

Re: How does the Interaction menu work (with javascript)?

Postby Xav » Fri Sep 08, 2017 12:41 am

You can target the thing itself (i.e. document.getElementById('someID')), but that just gets you a handle to the thing. To make any changes to its properties/attributes you need to either change the properties that are directly exposed to JS (e.g. document.getElementById('someID').className = 'selected'), or call a method on the thing to change an attribute (e.g. document.getElementById('someID').setAttribute('class', 'selected')).

The basic process is the same as working with HTML elements, so reading up on manipulating the DOM with JS will help. There are a few XML oddities, and a few SVG-specific oddities, but a decent DOM/JS tutorial will get you 90% of the way there.
Co-creator of The Greys and Monsters, Inked - Inkscape drawn webcomics
Web SiteFacebookTwitter

User avatar
GAngus
Posts: 74
Joined: Tue Oct 13, 2009 8:41 am
Location: NY

Re: How does the Interaction menu work (with javascript)?

Postby GAngus » Fri Sep 08, 2017 6:11 am

Here’s a link to some tutorial examples that may provide some help for you.
Inkscape & Snap.svg | GoInkscape!
http://goinkscape.com/category/inkscape ... -snap-svg/

User avatar
fillotassi
Posts: 19
Joined: Wed Sep 06, 2017 11:47 pm
Location: Italy
Contact:

Re: How does the Interaction menu work (with javascript)?

Postby fillotassi » Fri Sep 08, 2017 4:49 pm

I can't make it work. :x

Could you Xav rewrite your past example making the divs changing themselves?

Thanks, have a nice day

F

User avatar
Xav
Posts: 967
Joined: Fri May 08, 2009 1:18 am
Location: UK
Contact:

Re: How does the Interaction menu work (with javascript)?

Postby Xav » Fri Sep 08, 2017 7:42 pm

Well, I can - but it hardly seems worth it. The only change is the ID used in getElementById().

E.g. on the "Colour" rect (which has an ID of "rect10" because I didn't bother setting it manually), the onmouseover goes from this:

Code: Select all

document.getElementById('color_change').style.fill = '#ff0000';

to this:

Code: Select all

document.getElementById('rect10').style.fill = '#ff0000';


And that's it.

You might be better off posting an example of one of your non-working files - together with a description of what it should do - and I'll see if I can spot the error.
Co-creator of The Greys and Monsters, Inked - Inkscape drawn webcomics
Web SiteFacebookTwitter

User avatar
fillotassi
Posts: 19
Joined: Wed Sep 06, 2017 11:47 pm
Location: Italy
Contact:

Re: How does the Interaction menu work (with javascript)?

Postby fillotassi » Sat Sep 09, 2017 12:20 am

Thank you.

Here I tried to make the content of the chart change, as you did, embedding a script: http://svgshare.com/s/2ut

But ultimately, what I'd like to do is to make the cart fill with slurry until it's "full".

User avatar
Xav
Posts: 967
Joined: Fri May 08, 2009 1:18 am
Location: UK
Contact:

Re: How does the Interaction menu work (with javascript)?

Postby Xav » Sat Sep 09, 2017 1:49 am

The only interaction you've got in that file is to log some stuff to the console, and to call a pair of functions (movimento() and movimento2()) which aren't defined anywhere. There's nothing in there that's even trying to change colours, so I can't tell you where you've gone wrong.

Start with an empty file, and add a simple rectangle and some code that you think should work. Upload that and we might be able to make some progress.
Co-creator of The Greys and Monsters, Inked - Inkscape drawn webcomics
Web SiteFacebookTwitter

User avatar
fillotassi
Posts: 19
Joined: Wed Sep 06, 2017 11:47 pm
Location: Italy
Contact:

Re: How does the Interaction menu work (with javascript)?

Postby fillotassi » Sun Sep 10, 2017 11:59 pm

Ok, I did it. Sorry, I probably got confused between rectangles

Where is it best place to call for embedding an external script?

User avatar
Xav
Posts: 967
Joined: Fri May 08, 2009 1:18 am
Location: UK
Contact:

Re: How does the Interaction menu work (with javascript)?

Postby Xav » Mon Sep 11, 2017 12:09 am

I'm not entirely sure I understand the question. You can link to an external script, or you can embed a script directly into the SVG file (for larger or more complex projects linking is generally better). For both these options go to the File > Document Properties dialog, then to the Scripting tag.
Co-creator of The Greys and Monsters, Inked - Inkscape drawn webcomics
Web SiteFacebookTwitter


Return to “SVG / XML Code”

Who is online

Users browsing this forum: Google [Bot] and 0 guests