@spacekk

Как изменить длину svg при клике?

Стрелка в формате svg, как при hover и click заставить ее "растягиваться" как на примере ниже?

5b1932ea35b8d102536769.png

код стрелки

<svg width="51" height="16" viewBox="0 0 51 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M50.7071 0.707107C51.0976 0.316583 51.0976 -0.316583 50.7071 -0.707107L44.3431 -7.07107C43.9526 -7.46159 43.3195 -7.46159 42.9289 -7.07107C42.5384 -6.68054 42.5384 -6.04738 42.9289 -5.65685L48.5858 0L42.9289 5.65685C42.5384 6.04738 42.5384 6.68054 42.9289 7.07107C43.3195 7.46159 43.9526 7.46159 44.3431 7.07107L50.7071 0.707107ZM0 1H50V-1H0V1Z" transform="translate(0 8)" fill="#404040"/>
</svg>
  • Вопрос задан
  • 766 просмотров
Решения вопроса 1
AleksandrB
@AleksandrB
Совсем недавно вывел "Hello world"
ну тут 2 варианта:
1) скрыть пол блока за экраном, а при наведении или клике выдвигать его
2) задать его ширину в стилях и увеличивать эту ширину
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg
Сделать 2 элемента. 1 стрелка, она просто двигаться будет. Второй линия, она будет увеличиваться. Ибо перерасчитывать path не вариант, а трансформации изменят aspectRatio
Ответ написан
Ваш ответ на вопрос

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

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