SVG-позиціонування

203

У мене є гра зі SVG і у мене є кілька проблем з позиціонуванням. У мене є ряд форм, які містяться в gтезі групи. Я сподівався використати його як контейнер, тому я міг би встановити його х положення, і тоді всі елементи в цій групі також переміститься. Але це здається неможливим.

Як більшість людей займаються позиціонуванням групи елементів, яку ви хочете перемістити в тандемі?
Чи існує якесь поняття відносного позиціонування? наприклад, щодо свого батька

svg position grouping

— ChrisInCambo
джерело

276

Все в елементі g розташоване відносно поточної матриці перетворення.

Щоб перемістити вміст, просто покладіть перетворення в елемент 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 .

— Каğян Каял
джерело

33

Правильно, елемент SVG також може бути елементом групування. Я хотів би зазначити, що елемент SVG реалізує відсікання за замовчуванням (принаймні на даний момент у Chrome). Це означає, що будь-яке переповнення не буде видно. На відміну від елемента "g". Просто встановіть переповнення = "видиме", і ви знову в бізнесі, якщо це вас вкусить.

— бленман

1

Це корисно, якщо ви хочете перекласти групу елементів із відсотками: stackoverflow.com/a/17103928/470117

— mems

14

Чи є недоліки використання svg замість g?

— грабантот

34

Як було сказано в іншому коментарі, transformатрибут gелемента є тим, що ви хочете. Використовуйте transform="translate(x,y)"для переміщення gнавколо, а речі, що знаходяться в межах gзаповіту, рухатимуться по відношенню до g.

— закодований
джерело

22

Є два способи групування декількох 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>елементу.

— феншу
джерело

13

чому у <g> немає атрибута ax та y, тоді як у всіх інших тегів svg? це означає, що позиція завжди абсолютна в <svg> ... немає відносної позиції,

— возз'єднується

2

комітети з відкритим кодом такі.

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

Я згоден ... це здається поганим вибором дизайну. Просто посилення трансформації X вимагає написання потенційно складного рядка та зберігання всіх змінних деінде

— Вії

9

@ user1952009: є шанс - лише шанс - ви насправді не розумієте вибір дизайну, який увійшов у SVG.

— Пол Д. Уейт

3

<g> призначений для групування. Він не представляє жодної форми самостійно, тому не має сенсу мати місцезнаходження або розмір. Має сенс мати атрибут перетворення , який можна прочитати як "застосувати це перетворення до всієї групи".

— AlQafir