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

Have a look at the file I posted in this thread for an example: viewtopic.php?f=5&t=32834&p=100321#p100321

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?

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?

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

:-/

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.

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/

I can't make it work.

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

Thanks, have a nice day

F

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:

to this:


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.

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".

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.

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

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

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.