SVG маска, что не так?

Question

[GeKskill]

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

Answer 1

[AngReload]

Чего-то ты намешал всё в кучу. Зачем было объединять бутылку и дорогу в один SVG? Даже анимация бутылки молока нет.

А неработает по трём причинам:
1. у тебя есть «дорога» и «путь». Видимо по аналогии с «бутылкой» и «молоком». Но бутылка — это только контур, это не закрашенная фигура. А дорога — она уже закрашена, белый путь не будет на ней виден.
2. Если закрасить «путь» не белым, а например, чёрным, то его всё равно не будет видно. Если удалить ему атрибут маски, то он становится виден. Это значит, что маска нарисована криво. Как это исправить — я не знаю, так как твой редактор понаставил отрицательных координат, размеров, ротате, транслате, короче говоря я незнаю где этот треугольник должен начинаться и заканчиваться. Только наугад подбирать.
3. в результате эффект будет плохо выглядеть. Так как дорога не прямая, а иногда даже поворачивает назад, а анимация будет только снимать прозрачность слева на право.

Comments

[GeKskill]

А вообще есть способ такую кривую дорогу нормально заполнить? Чтобы сама заливка как-то анимировалась, а не объект за маской. Второй день уже ищу хоть что-то подходящее... Фигуры рисовал в ФШ, потом правой кнопкой по слою -> экспорт в SVG.
Надо чтобы вот эта дорога заполнялась)

[AngReload]

GeKskill, как должен выглядеть пройденный и не пройденный путь - просто разные цвета: белый и синий?
Синие точки - это места где анимация должна остановиться?
Думаю можно, но надо заморочиться.

[GeKskill]

AngReload, Да, просто другим цветом. Точки это типо контрольные пункты, тоже будут менять цвет (с ними все просто), когда значение из базы будет больше заданного (php + CSS). А вот с дорогой прям гемор какой-то)

[AngReload]

GeKskill, https://jsfiddle.net/AngReload/5d6o7b04/
polyline не очень аккуратно нарисовал, на некоторых изгибах и при медленной анимации это видно, надеюсь это не критично.

[GeKskill]

AngReload, Потрясно,это то, что надо! Спасибо большое. Я правильно понял, что polyline - эта ломаная линия (с толстой обводкой) повторяющая контур дороги, под маской? Когда пробовал также фигуры dasharray'ем анимировать получалось очень коряво, а тут вон оно как сложилось) А ещё не подскажете, почему если убрать inifite, то заполнение исчезает, хочется чтобы один раз анимация сработала (на заполнение, без обратки) и осталась на нужном месте. Ещё раз, большое Вам спасибо!

[AngReload]

GeKskill,
Да, polyline - ломаная линия, с толстой обводкой и без заливки.
Два варианта заполнения:
1. animation: dash 5s linear alternate forwards;
2. stroke-dashoffset: 0;
Наверное, лучше первый способ.