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

203

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

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

svg position grouping

— ChrisInCambo
источник

276

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

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

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

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

— Аарон Дигулла
источник

73

Существует более короткая альтернатива предыдущему ответу. Элементы 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 .

— Kağan Kayal
источник

33

Правильно, элемент SVG также может быть элементом группировки. Я хотел отметить, что элемент SVG по умолчанию реализует отсечение (по крайней мере, на данный момент в Chrome). Это означает, что любое переполнение не будет видно. В отличие от элемента "g". Просто установите overflow = "visible", и вы снова в деле, если это вас укусит.

— bladnman

1

Это полезно, если вы хотите перевести группу элементов с процентами: stackoverflow.com/a/17103928/470117

— мемы

14

Есть ли недостатки использования svg вместо g?

— grabantot

34

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

— codedread
источник

22

Есть два способа сгруппировать несколько форм SVG и расположить группу:

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

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

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

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

— fengshuo
источник

13

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

— повторяет

2

комитеты с открытым исходным кодом такие.

— Мухаммед Умер

Я согласен ... это кажется плохим выбором дизайна. Простое увеличение X-преобразования группы требует написания потенциально сложной строки и сохранения всех переменных где-либо еще

— Eyelash

9

@ user1952009: есть шанс - просто шанс - что вы на самом деле не понимаете вариантов дизайна, которые вошли в SVG.

— Пол Д. Уэйт

3

<g> для группировки. Сам по себе он не представляет никакой формы, поэтому не имеет смысла иметь местоположение или размер. Однако имеет смысл иметь атрибут transform , который вы можете прочитать как «применить это преобразование ко всей группе».

— AlQafir

0

Я знаю, что это старый, но ни <svg>групповой тег, ни <g>исправленная проблема, с которой я столкнулся. Мне нужно было настроить положение y тега, на котором также была анимация.

Решением было использовать оба тега и:

<svg y="1190" x="235">
   <g class="light-1">
     <path />
   </g>
</svg>

— Дружественный код
источник