@GeKskill

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

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

  • Вопрос задан
  • 284 просмотра
Решения вопроса 1
AngReload
@AngReload
Кратко о себе
Чего-то ты намешал всё в кучу. Зачем было объединять бутылку и дорогу в один SVG? Даже анимация бутылки молока нет.

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

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

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