Выстроить элементы внутри svg последовательно

Как последовательно выстроить группы внутри одного svg-элемента? Надо чтобы элементы g первого svg сами встали приблизительно как svg-теги во втором divе.
https://jsfiddle.net/kj1tmre3/1/

PS: Этот вопрос по-английски.

Ответ

К сожалению, svg не умеет автоматически раскладывать элементы, как это происходит в html. Однако, можно вложить группы друг в друга и применить к ним transform - в таком случае каждая группа будет уползать всё дальше от родительской. Вот такой хак:
.dest g { transform: translateX(24px); } .dest svg > g { transform: translateX(0); }

PS: А вообще лучше воспользоваться несколькими svg-тегами.