Как перевести группу SVG на процент от области просмотра

У меня есть svg <rect>, который находится в <g> (group), и я хотел бы масштабировать его, а затем переводить его на процент от области просмотра. Большинство всего в svg позволяет специфицировать единицы через смехотворное количество вариантов; например px, em,%, ex, pt, pc,... Однако кажется, что число, указанное в переводе, - это только пиксели.

Дело в том, что если мне нужно вернуться назад и пересчитать значения пикселей для перевода, тогда мой svg станет зависимым от разрешения. Тогда меня, вы и все втянете в парадокс. Вы можете понять, почему я немного обеспокоен.

<svg>
  <g transform="scale(1, 1) translate(0, 0)">
    <rect x="45%" y="25%" height="50%" width="10%"/>
  </g>
</svg>

http://jsbin.com/ubeqot/1/edit

Ответ 1

Вставьте элемент <g> во внутренний элемент <svg> и добавьте атрибуты x и y с процентными значениями во внутренний элемент <svg>, чтобы перевести его.

<svg>
  <svg x="10%" y="20%">
    <g transform="scale(1, 1)">
      <rect x="45%" y="25%" height="50%" width="10%"/>
    </g>
  </svg>
</svg>

Если вы хотите, чтобы масштаб применялся сначала, вы должны поместить элемент <svg> внутри <g>.