Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

SVG positioning like position:absolute

Tags:

svg

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?

like image 990
Dan Avatar asked Nov 13 '22 19:11

Dan


1 Answers

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.

like image 58
John P. Fisher Avatar answered Jan 29 '23 21:01

John P. Fisher