I am working on electrical diagrams - simple 2d graphics shown on a web page. Some symbols on a diagram should change their state (open contactor to close contactor) based on logic in JS code. A user will be interacting with a page and these interactions need to translated into svg changes. Here is a link to my question on SO:
https://stackoverflow.com/questions/495 ... 0_49577259 with images since I cannot paste them here. Please, take a look and give an idea.

Thanks

You can't paste images into a forum, but you can upload them by attachment (use the full editor to find the Attachments tab).

I can't answer your question....not directly, but it looks like you've got an answer on stackoverflow.

However, I can refer you to this page, which gives an overview of animating either images which were made with Inkscape, or using pure SVG for animation (or SVG and CSS, or other things). https://inkscape.org/en/learn/animation/

I mean, those are incredibly simple images. You could easily re-draw them in Inkscape, and apply them to one of those many programs (whichever ones will do the type of animation you need) -- I would think that would be easier that trying to make the existing code work (which the answer on stackoverflow indicates isn't quite right).

Or maybe you already have the right answer in SO?

Thanks for the answer. Although, I am not an SVG developer, I am a good JS one. The way I would want it is to first create a main drawing that would represent a power off state. Then for each element that can change its state have its optional images that are hidden when a page is loaded. Based on rules implemented in the hosting page show or hide parts of the drawing. Ideally, it would be something like this. I get a reference to an element and replace with new state by showing another element in its place. I dont think I need animation, but it would be nice to have some way of preparing a document with parts that can be easily manipulated later with JS code. Or these parts can be stored externally as a library and loaded with the main drawing. I dont mind spending time preparing such documents, but I am trying to avoid any SVG programming if it is all possible.

I wasn't suggesting SVG programming....I don't think. You just draw the image in Inkscape, and Inkscape automatically creates the SVG for you. Just save the SVG file, and open it with a text editor. And there's the SVG code.

Well anyway, as I said, this question is mostly over my head. I just thought I might be able to lead you to some resources.

If you're a good JS developer then this is a doddle. Here's what I would do:

1) Draw your base design with none of the variable symbols.
2) Draw your variable symbols on additional layers. E.g. the closed state of all the switches might be on one layer, the open state on another layer. That will let you test the effect by showing and hiding layers. Each symbol should have all its parts grouped so they can be shown and hidden as one.
3) For each variable symbol's group, give it a known ID via the Object > Object Properties dialog (make sure you click the "Set" button for it to take effect).
4) Once you're happy with the variable symbols, select each of the states other than the base state and set the "Hide" checkbox in the Object Properties dialog. This basically adds "display: none;" to the element's style attribute, same as you would do with an HTML element.

From then on it's simple DOM manipulation. Use document.querySelector("#ID") to get each element, then set the element.style.display to "initial" or "none" to toggle the visibility of each element on and off. You can attach click and keyboard handlers just as you would in HTML.

In short, don't sweat the SVG parts - just treat it as some HTML (actually XML) elements that you're not familiar with.

I see, good direction. Thank you!