Как распределить элементы на адаптивной, векторной кривой?

Question

[Big Wheel]

Есть векторная кривая, которая должна подстраиваться под размер контейнера.
На этой кривой нужно распределить несколько элементов, с которыми будет взаимодействовать указатель.

Самое простое решение offset-path, но мне он не подходит из за ограниченной поддержки.

Подскажите какие еще есть варианты реализовать эту задачу.

Comments

[Kentavr16]

Здесь скорее всего нужны библиотеки вроде three.js

[Kentavr16]

Ещё можно канвас или свг

[Big Wheel]

@Kentavr16

Здесь скорее всего нужны библиотеки вроде three.js

Скорее не нужны ) Three.js немного для другого предназначена )

Ещё можно канвас или свг

SVG!.. Действительно, если вопрос о векторных кривых. А что есть еще много вариантов для рисования кривых в веб-разработке?)))

Canvas не хранит графику в виде DOM-элементов, и поэтому не так хорошо подходит для решения описанной задачи.

Answer 1

[Ivan Bogachev]

Хорошего нативного и кроссбраузерного решения у нас пока нет. Но у path в SVG есть методы getTotalLength и getPointAtLength, а из них можно сообразить себе утилиту для расположения кружков вдоль кривой в удобных единицах измерения. Это не так здорово, как на CSS, но тем не менее:

function putCircleOnPath(path, circle, percent) {
    const length = path.getTotalLength();
    const point = path.getPointAtLength(length * percent / 100);

    circle.setAttribute('cx', point.x);
    circle.setAttribute('cy', point.y);
}

Получится что-то такое:

Comments

[Big Wheel]

Ivan Bogachev

Хорошего нативного и кроссбраузерного решения у нас пока нет.

В итоге пришлось абсолютно позиционировать элементы внутри контейнера : / поверх SVG с `preserveAspectRatio="none"`.
Богомерзко, но задачу решает и пуленепробиваемо..

За метод `getPointAtLength()` большое спасибо! Пойду эксперементировать ).

[Kentavr16]

Big Wheel,

SVG!.. Действительно, если вопрос о векторных кривых. А что есть еще много вариантов для рисования кривых в веб-разработке?)))

. . .