Growing svg with fixed-size elements?

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?

Oared

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>

Cultivator

Won't that freak IE out? – Oared