We have an angularjs web site that has a single large SVG image as the background. Imagine that it is a picture of a forest with a windy path going through it. We would like to place graphical buttons along the path that the user can click on to go to the next screen.
The application is written so if you resize the browser, the SVG background will resize according to its aspect ratio. If the browser dimensions aren't in the same aspect ratio as the SVG, we still show the entire SVG in the correct aspect ratio, but we have a white border around the image to fill up the remaining area of the browser window.
The problem is: How do I put the graphical buttons on top of the SVG and make sure that they stay in the correct position as we resize? We don't want the buttons to drift off the path visually.
We believe we need to create the buttons outside of the SVG because we would like to have different graphical states for the button (available, unavailable, pressed, roll-over, etc). And likely the buttons need to use SVG graphics with the same aspect ratio as the background to scale as well? However, if there are other aspects of SVG that we don't know about that would help for this situation, we are open to anything.
We had a similar problem in the past, and we tried to position the buttons using css properties of left and top as percentages. This kind of works, but the buttons are moving around too much for our liking. We weren't using SVG graphics for the buttons with the same aspect ratio though...just PNG. Maybe that was the problem?