Позиционирование SVG

У меня есть игра с SVG, и у меня есть несколько проблем с позиционированием. У меня есть ряд фигур, которые содержатся в теге g. Я надеялся использовать его, как контейнер, поэтому я мог бы установить его положение x, и тогда все элементы в этой группе также будут перемещаться. Но это не представляется возможным.

  • Как большинство людей предпочитают позиционировать группу элементов, которые вы хотите перемещать в тандеме?
  • Есть ли какое-либо понятие относительного позиционирования? например относительно его родителя

Ответы

Ответ 1

Все в элементе g расположено относительно текущей матрицы преобразования.

Чтобы переместить содержимое, просто поместите преобразование в элемент g:

<g transform="translate(20,2.5) rotate(10)">
    <rect x="0" y="0" width="60" height="10"/>
</g>

Ссылки: Пример из спецификация SVG 1.1

Ответ 2

Существует более короткая альтернатива предыдущему ответу. Элементы SVG можно также сгруппировать, вставив элементы svg:

<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <svg x="10">
    <rect x="10" y="10" height="100" width="100" style="stroke:#ff0000;fill: #0000ff"/>
  </svg>
  <svg x="200">
    <rect x="10" y="10" height="100" width="100" style="stroke:#009900;fill: #00cc00"/>
  </svg>
</svg>

Два прямоугольника идентичны (кроме цветов), но родительские элементы svg имеют разные значения x.

См. http://tutorials.jenkov.com/svg/svg-element.html.

Ответ 3

Как упоминалось в другом комментарии, атрибут transform в элементе g - это то, что вы хотите. Используйте transform="translate(x,y)" для перемещения g вокруг, и вещи в пределах g будут перемещаться относительно g.

Ответ 4

Существует два способа группировать несколько форм SVG и позиционировать группу:

Первый, чтобы использовать <g> с атрибутом transform, как писал Аарон. Но вы не можете просто использовать атрибут x в элементе <g>.

Другой способ - использовать вложенный элемент <svg>.

<svg id="parent">
   <svg id="group1" x="10">
      <!-- some shapes -->
   </svg>
</svg>

Таким образом, # group1 svg вложен в #parent, а x=10 относится к родительскому svg. Однако вы не можете использовать атрибут transform на элементе <svg>, что совершенно противоположно элементу <g>.