I am trying to position an inner element inside the root element. The root element is set to be 100% high and 100% wide. However, I want the inner svg to be 10px or so from the edge of the outer svg--all except the right edge, which I would like to be 200px from the outer right edge. I want this to display in a web browser and so the user should be able to resize the browser and hence the outer svg while the inner svg should be able to maintain the correct distance from the outer svg on each side.
Like this:
+OUTER SVG------------------------------------------+
| |
| +INNER SVG----------------+ |
| | | |
| | | 200px |
| | | <---+-----+----> |
| | | |
| | | | 1
| | | | 0
| | | | 0
| | | | %
| | | |
| | | | h
| | | | i
| +-------------------------+ | g
| | h
| |
+---------------------------------------------------+
100% Wide
Is it possible to do this with SVG alone?
If I understand you correctly, this is trivial. SVG is built to have many visual elements in a Z stack, aligned, overlapped, whatever.
Use Inkscape, free and opensource, to create SVGs, and then you can edit the file directly in a text editor if you want to see how SVG is formed. In Inkscape you can use the alignment tools, the grid, the transform-scaling tool, drag and drop, and probably some other tools to accomplish this.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With