Growing svg with fixed-size elements? - svg

Question

I have an arrow SVG, set up like this one:
<svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 100 100" class="arrow">
<g class="tail">
<circle (...)></circle>
</g>
<g class="body">
<rect (...)></rect>
</g>
<g class="head">
<polygon (...)>
</g>
</svg>
And I want to set it up so that when resizing it via CSS, regardless of its size,
the tail will remain in the left hand side with the same proportions,
the head will stay in the right hand side, also with the same proportions, and
the body will stretch horizontally indefinitely.
Can I do that? How can I do that?

Answer 1

Basically, you can create such SVG graphics by using nested svg elements with relative positioning (%value of root svg element's size), like this.
svg{
overflow:visible;
}
svg.root{
width:200px;
height:100px;
margin:0 10px;
background-color:rgba(255,255,0,.5);
transition: 1s ease-in-out 0s;
}
svg.root:hover{
width:300px;
height:150px;
}
<svg class="root">
<svg class="tail" y="50%">
<circle r="10" fill="red"/>
</svg>
<svg class="head" x="100%" y="50%">
<polygon points="-10,-10 10,0 -10,10" fill="blue"/>
</svg>
<svg class="body" y="50%">
<rect x="0" y="-2" width="100%" height="4" fill="green"/>
</svg>
</svg>