Как отрисовать SVG при наведении?

Question

[Конан Варвар]

Ребята, всем привет.
Подскажите пожалуйста, как мне сделать следующее:
Есть пунктирный SVG, который должен отрисовываться при наведении, как именно вы можете увидеть
Вот моя попытка, но здесь почему-то рисует сплошную линию, а не пунктир.

Answer 1

[Сергей Соколов]

Отрисовку делают изменяя смещение очень длинного штриха stroke-dashoffset, так, чтобы штрих появлялся, создавая эффект прорисовки.

В вашем случае, можно делать наоборот - исчезновение сплошной линии цвета фона, скрывающей под собой такую же, но частым пунктиром.

Недавно отвечал на близкий вопрос и сделал демо.

Comments

[Kovalsky]

То есть что-то типа такого, только маскируете не картинку, а эту вашу пунктирную линию.

[Конан Варвар]

Никита Полевой: Спасибо мужики, дельные советы. Именно за идеей я сюда и обратился)

[Конан Варвар]

Никита Полевой: Ребят, не могу понять как мне сделать, чтобы верхний слой уезжал, через stroke-dashoffset не получается.
https://jsfiddle.net/s2y4ford/

Answer 2

[Alexander Pushkarev]

Вот вам пример - https://codepen.io/Evgeny/pen/IEGoq