Basically what I’m looking to do is something like 9-slice scaling, where, in a dynamically sized SVG element (say @100% width) elements can be drawn, without distortion relative to the left and right edges of the screen while another element is stretched between them.
Consider a dumbbell as an example, one whose weights never change in size, but the bar connecting them can grow as the container grows:
from
+------+
| O--O |
+------+
to
+------------+
| O--------O |
+------------+
I can position elements absolutely using fixed elements as well as percentages, but there are no concepts of the box model in SVG allowing to use something like margins which would work pretty well for this. I also don’t see many (any?) mentions of left,right,top,bottom attributes in the SVG elements which would also work here.
So the question is, is this possible without scripting the changes on resize?
So far the only thing I’ve found that’s close is a complicated scheme of nested svg elements using PreserveAspectRatioAttribute alignments to fit to an edge.
