SVG масштабирование
 

Нужно масштабировать SVG-холст, но без изменения размеров лежащих внутри объектов.

Например: на картинке черный квадрат - исходный, розовый - после увеличения размера холста.
Увеличиваю так:

<svg width="1500" height="1500" version="1.1" viewBox="0 0 500 500">

Нужно получить такую позицию чёрного квадрата после масштабирования:

Вот тебе две картинки с разным размером холста но выглядещие совершенно одинаково
Секрет в том что viewBox соответствует размеру холста SVG

<svg width="400px" height="100px" viewBox="0 0 400 100">
  <g id="square">
      <rect x="10" y="10" width="30" height="30" style="fill: none; stroke: black;"/>
  </g>  
</svg>  
</br>

<svg width="200px" height="100px" viewBox="0 0 200 100">
  <g id="square">
      <rect x="10" y="10" width="30" height="30" style="fill: none; stroke: black;"/>
  </g>  
</svg>

В таком случае и координаты у обеих квадратов будут одинаковы(визуально будут лежать в одном и том же месте). Мне нужно чтобы при изменении масштаба появлялся сдвиг как у розового квадрата, но размер оставался тем же.

Я и сделал без изменения :)

Если ширина менятся недолжна а должны только координаты то пересчитывай скриптом позицию каждого ребенка холста

var коэф=текущаяШиринаХолста/оригинальнаяШиринаХолста;
ТекущийXэлемента=ОригнальныйXэлемента * коэф;

Спасибо, формула то что надо :)