У меня есть 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
Вставьте элемент <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>.