My designer has created a very nice svg for me which I have opened in Inkscape. The svg consists of many tiny paths that form polygons. I need to be able to create mouseovers in a website on groups of these paths so I can control style (fill, stroke opacity) on the entire group at once. I was able to use union on the paths to create the sections I need for the mouseovers however the mouseover only activates on sections of the path because some of the paths are just outlines and have no background area so the mouse doesn't activate on those sections of the path that have no background. What I want is a single path around the group of paths so when the user hovers over the group I can set the fill, stroke etc. Is there a simple way to automatically trace around all of the paths in the group? Or can I create background behind my path so the mouse activates on any part of the path?
I'm quite sure there will be a way to do this with Inkscape. But I can't quite understand what you're asking.
I understand the part about the polygons being made of a lot of tiny paths. There's an Inkscape extension that can quickly join them all together. Or join sections together.
But I'm confused about needing the path around the group of paths, and adding fill/stroke. If it would help to put a background behind the paths, that might be easier than making a path around the paths.
Maybe someone else can catch on to the situation? But I would need to see an example, a screenshot, or the SVG file, to be able to give specific steps.
Thanks for the reply. I played around with it a little more and I think I have a better grasp on why it's not working. The center of most of the objects are essentially hollow (and therefor the mouseover is not triggered since nothing is there) because there is an outer and inner path on the objects that forms the outline of the objects. I think the solution here is either to trace a path around the outside of the objects (very labor intensive and error prone unless there is a simple way to do this), or to copy the path and delete the inner path and then remove the fill so the path is transparent (also labor intensive and prone to error).
Perhaps this is a solution for you. You can draw a rectangle around your paths. Then you use the bucket tool to fill in the space between the rectangle and the outer parts of your paths. After that, you can use the bucket tool to fill in the inner part that was left empty.
You can give the path in the background the desired colour.
Thanks. I'm sure that would work. I was just hoping that there was a way to automatically do it because the polygons I'm working with have ~1000 nodes so it will take a long time.
I'm still quite confused about what's on the canvas and what you want to do. In your screenshot, is the whole screenshot an example something that you need to mouseover? Or does only part of it need to be recognized by the mouse?
Why can't you mouse over the gray lines? Are they too thin?
Ok, if I understand, here's what I would do. For each section, Path menu > Break Apart. Everything will turn gray when you do that. (or whatever color they are filled with) Select the largest piece (by putting your mouse on the very outer edge) and duplicate. To prevent confusion, make it a different color and put it on top in z-order. Now select everything. While holding Shift key, click on the large, different color object (that's why we put it on top, to make it easy to deselect). Then do Path menu > Combine. Now select only the different colored piece on top, and move it to the bottom. And now you should see all the other pieces have been re-combined, and look just like they did originally. And I guess you want to change the large piece to white filled, if I understand correctly?
My designer has created a very nice svg for me which I have opened in Inkscape. The svg consists of many tiny paths that form polygons. I need to be able to create mouseovers in a website on groups of these paths so I can control style (fill, stroke opacity) on the entire group at once. I was able to use union on the paths to create the sections I need for the mouseovers however the mouseover only activates on sections of the path because some of the paths are just outlines and have no background area so the mouse doesn't activate on those sections of the path that have no background. What I want is a single path around the group of paths so when the user hovers over the group I can set the fill, stroke etc. Is there a simple way to automatically trace around all of the paths in the group? Or can I create background behind my path so the mouse activates on any part of the path?
Welcome to the forum!
I'm quite sure there will be a way to do this with Inkscape. But I can't quite understand what you're asking.
I understand the part about the polygons being made of a lot of tiny paths. There's an Inkscape extension that can quickly join them all together. Or join sections together.
But I'm confused about needing the path around the group of paths, and adding fill/stroke. If it would help to put a background behind the paths, that might be easier than making a path around the paths.
Maybe someone else can catch on to the situation? But I would need to see an example, a screenshot, or the SVG file, to be able to give specific steps.
Thanks for the reply. I played around with it a little more and I think I have a better grasp on why it's not working. The center of most of the objects are essentially hollow (and therefor the mouseover is not triggered since nothing is there) because there is an outer and inner path on the objects that forms the outline of the objects. I think the solution here is either to trace a path around the outside of the objects (very labor intensive and error prone unless there is a simple way to do this), or to copy the path and delete the inner path and then remove the fill so the path is transparent (also labor intensive and prone to error).
https://imgur.com/a/GXRRz02
Hi Atroxodisse,
Perhaps this is a solution for you. You can draw a rectangle around your paths.
Then you use the bucket tool to fill in the space between the rectangle and the outer parts of your paths.
After that, you can use the bucket tool to fill in the inner part that was left empty.
You can give the path in the background the desired colour.
Thanks. I'm sure that would work. I was just hoping that there was a way to automatically do it because the polygons I'm working with have ~1000 nodes so it will take a long time.
I'm still quite confused about what's on the canvas and what you want to do. In your screenshot, is the whole screenshot an example something that you need to mouseover? Or does only part of it need to be recognized by the mouse?
Why can't you mouse over the gray lines? Are they too thin?
Ok, if I understand, here's what I would do. For each section, Path menu > Break Apart. Everything will turn gray when you do that. (or whatever color they are filled with) Select the largest piece (by putting your mouse on the very outer edge) and duplicate. To prevent confusion, make it a different color and put it on top in z-order. Now select everything. While holding Shift key, click on the large, different color object (that's why we put it on top, to make it easy to deselect). Then do Path menu > Combine. Now select only the different colored piece on top, and move it to the bottom. And now you should see all the other pieces have been re-combined, and look just like they did originally. And I guess you want to change the large piece to white filled, if I understand correctly?