Применение преобразований в группе к каждому элементу после распаковки

Мы работаем над проектом по созданию редактора SVG с нуля (мы не можем использовать внешние библиотеки) — и мы попали в ловушку.

Нам нужно создать инструмент для группировки фигур, что нам удалось сделать, и мы также можем использовать все наши инструменты (масштабирование/перевод/поворот) на группе. Тем не менее, мы застряли в точке, пытаясь разгруппироваться. Я думаю, что эти два варианта либо берут преобразования из элемента группы и затем каким-то образом применяют их к каждому элементу, или игнорируют преобразование группы и просто применяют преобразования к каждому элементу с самого начала.

Кто-нибудь работал с этим или есть какие-то идеи, которые могут помочь? Поскольку преобразования не являются коммутативными, и, например, вращение вокруг другой относительной точки для каждой формы, мы довольно застряли.

Метки

1 ответ

  1. Преобразования работают вложенным образом. Таким образом, чтобы разгруппировать и применить преобразование групп к детям, все, что вам нужно сделать, это добавить преобразование родительских групп к преобразованиям детей.

    Таким образом, следующие две SVG эквивалентны:

    svg {
      border: solid 1px blue;
    }
    <svg>
      <g transform="translate(100,30)">
        <rect width="100" height="80" transform="rotate(30, 50,40)"/>
      </g>
    </svg>
    
    <br/>
    
    <svg>
      <rect width="100" height="80" transform="translate(100,30) rotate(30, 50,40)"/>
    </svg>