Как отрисовать контур в SVG?

Question

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

Ребят, всем привет.
Ранее, я задавал этот вопрос, получил толчек, дошел до определенного момента и опять застрял.
Задача: Есть контурный SVG, задача состоит в том, чтобы при наведении он отрисовывался следующим образном Мне посоветовали сделать оверлей в SVG с такими же размерами, но цветом фона, то есть чтобы при наведении этот оверлей исчезал, а контурный SVG появлялся, я это сделал, но не могу понять, как мне получить нужный эффект отрисовки по контуру... Что-то должно быть связано с stroke-dashoffset, но у меня не получилось разобраться.

Answer 1

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

Небольшая проблема была в том, что у вас этот контур состоял из двух кусков: правого верхнего уголка и всего остального (привет дизайнеру?). Исправил путь так, что теперь это один сплошной путь, без лишних точек и без ненужных групп <g>.

скриншот

Делаем две копии этого пути, одна под другой. Нижняя – частым синим штрихом. Верхняя – чуть более широким штрихом и цвета фона.

Подобрал на глаз длину штриха 2200, чтобы полностью закрывал всю длину, и на эту же величину смещаю паттерн при наведении мышки. CSS transition делает анимацию плавного перехода от нулевого смещения (паттерн начинается с 0 и полностью закрывает нижнюю копию) до смещения в 2200, чтобы начался пробел и полностью открыл нижний путь.

Чтобы срабатывали стили :hover при наведении мышки пришлось обернуть SVG в <div>

Fiddle

Comments

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

Большое спасибо, вы космос, здоровья вам и всей вашей семье! :)