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

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

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

Ответы на вопрос(3)

G также могут быть сгруппированы путем вложения элементов 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..

 bladnman07 сент. 2013 г., 00:21
Правильно, элемент SVG также может быть элементом группировки. Я хотел отметить, что элемент SVG по умолчанию реализует отсечение (по крайней мере, на данный момент в Chrome). Это означает, что любое переполнение не будет видно. В отличие от элемента "g". Просто установите overflow = "visible", и вы вернетесь в бизнес, если это вас укусит.
 grabantot15 июн. 2017 г., 10:18
Есть ли недостатки использования svg вместо g?
 mems26 сент. 2014 г., 15:12
Это полезно, если вы хотите перевести группу элементов с процентами:stackoverflow.com/a/17103928/470117

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

зования.

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

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

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

Ваш ответ на вопрос