Трансформации тоже создают свою систему координат. Чтобы применить трансформацию ко всему содержимому, обернём его в группу (элемент <g>):

<svg width="350" height="200">
  <g>
    …
  </g>
</svg>

И добавим трансформацию:

<svg width="350" height="200">
  <g transform="translate(50, 50)">
    …
  </g>
</svg>

Всё содержимое сместилось на 50 пикселей по вертикали и по горизонтали вместе с системой координат, и если теперь добавить ещё одну трансформацию, она уже рассчитывается от новой системы координат:

<svg width="350" height="200">
<g transform="translate(50, 50) rotate(15)">
  …
</g>
</svg>

В SVG центр вращения по умолчанию находится в точке 0,0. До первой трансформации это был левый верхний угол вьюпорта, после трансформации — левый верхний угол трансформируемого содержимого. Вторая трансформация снова изменит систему координат группы.