Проблемы с получением длины пути SVG в процентах в JS
Мне нужен полноэкранный путь SVG, который я рисую, но он должен быть процентным для всех устройств, однако, когда я измеряю длину пути в JS, он просто возвращает 400 из-за следующего определения пути:
<path id = "path" d = "M 0,0 0,100 100,100 100,0 0,0"></path>
Мне нужно измерить общую длину пути, чтобы я мог использовать dash-array и dash-offset, чтобы нарисовать его за один плавный переход.
Вот код с макетом примера: https://codepen.io/jaybox325/pen/vjBgMe?editors=1111
Возможно ли вообще это измерить, потому что технически он не имеет абсолютной длины.
У меня есть запасная версия, сделанная с использованием псевдоэлементов, но я бы хотел использовать SVG, если это возможно!
Спасибо!
Я подозреваю, что вам просто нужен viewBox, а затем вы можете использовать абсолютные пути.
Спасибо @ raul.vila! Я изо всех сил пытался найти терминологию для поиска и раньше не сталкивался с функцией getBoundingClientRect.
Пожалуйста. Не волнуйтесь, отметка как дубликат имеет намерение предоставить и ответить и связать ваш вопрос с этим ответом для будущих пользователей, которые могут найти ваш вопрос вместо оригинала.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Благодаря raul.vila в комментариях мне удалось использовать функцию getBoundingClientRect(), чтобы получить ширину и высоту прямоугольника и использовать эти длины для идеальной анимации пути.
Подробнее здесь: Получить размер пути в SVG
Объясните, как вы хотите, чтобы путь выглядел, а не свои проблемы с длиной. Я подозреваю, что это проблема X Y.