Страницы

Поиск по вопросам

среда, 19 июня 2019 г.

Выстроить элементы внутри 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-тегами.

Комментариев нет:

Отправить комментарий