sashabeep
@sashabeep
Создатель гипертекстовых документов

Существуют ли библиотеки для верстки выносных указателей?

5da710190674e077405668.png

Ищу библиотеку, которая сделает выноски поверх изображений в указанном виде. Конец выноски должен крепиться к какой-то точке на изображении (в % по x,y), длина линии под строкой описания должна зависеть от количества символов.

Либо нормальный туториал как сверстать похожие элементы самому.

Я уже весь гугл сломал как такое гуглить. По запросам типа «svg pointer stroke tooltip referencer» и подобным нашел только одну слегка похожую библиотеку krispo.github.io/yarrow но даже на демо-сайте нет никакой адаптивности, а скейлинг какой-никакой нужен.

Вообще, подход, думаю, в том, чтобы создать SVG элемент, внутри его image, и линии рисовать поверх, но с чего начать пока не понимаю.

Еще нашел https://d3-annotation.susielu.com но про скейлинг пока не понял, Подписи создаются через tspan, обычными текстами, черта под текстом считается по длине строки, удобно
  • Вопрос задан
  • 436 просмотров
Решения вопроса 1
sfi0zy
@sfi0zy Куратор тега CSS
UI developer. Верстаю неверстаемое.
Можно сверстать картинку картинкой, надписи - дивами, а линии провести с помощью leader-line в нужные места на целевых элементах. Таким образом и верстка останется "человеческой", с возможностью использовать media-запросы и делать адаптивность привычным образом, и линии будут подстраиваться, если элементы будут менять размер или перемещаться.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы