Задать вопрос
Yriii
@Yriii

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

659d3800e59a1120736352.png

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

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

Подскажите какие еще есть варианты реализовать эту задачу.
  • Вопрос задан
  • 91 просмотр
Подписаться 1 Сложный 3 комментария
Решения вопроса 1
sfi0zy
@sfi0zy Куратор тега CSS
Creative frontend developer
Хорошего нативного и кроссбраузерного решения у нас пока нет. Но у 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);
}


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

Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы