Page 1 of 1

How does the Interaction menu work (with javascript)?

Posted: Thu Sep 07, 2017 6:48 pm
by fillotassi
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

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

Posted: Thu Sep 07, 2017 7:16 pm
by Xav
Have a look at the file I posted in this thread for an example: viewtopic.php?f=5&t=32834&p=100321#p100321

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

Posted: Thu Sep 07, 2017 11:05 pm
by fillotassi
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?

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

Posted: Fri Sep 08, 2017 12:06 am
by Xav
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?

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

Posted: Fri Sep 08, 2017 12:22 am
by fillotassi
I probably understood my problem; I'm trying to target the thing itself, while your targeting something which folllows.

:-/

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

Posted: Fri Sep 08, 2017 12:41 am
by Xav
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.

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

Posted: Fri Sep 08, 2017 6:11 am
by GAngus
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/

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

Posted: Fri Sep 08, 2017 4:49 pm
by fillotassi
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

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

Posted: Fri Sep 08, 2017 7:42 pm
by Xav
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.

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

Posted: Sat Sep 09, 2017 12:20 am
by fillotassi
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".

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

Posted: Sat Sep 09, 2017 1:49 am
by Xav
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.

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

Posted: Sun Sep 10, 2017 11:59 pm
by fillotassi
Ok, I did it. Sorry, I probably got confused between rectangles

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

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

Posted: Mon Sep 11, 2017 12:09 am
by Xav
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.