Вопросы с меткой [smil]

Руководство по использованию метки отсутствует.

Фильтрация
Сортировка
Метки
0 голосов
0 ответов
60 показов

Анимация фона svg картинки

Имеется такое задание: После загрузки страницы логотип заполняется черным цветом снизу вверх в начале логотип имеет только контур черного цвета. Не знаю как реализовать. В сети видел разные варианты ...
Dmytro 's user avatar
2 голоса
1 ответ
49 показов

Можно ли оптимизировать js-код для запуска и реверса smil-анимации при клике на svg-иконки когда их несколько?

Помогите, пожалуйста, разобраться, можно ли как-то оптимизировать js-код для реализации функционала запуска по клику вложенной smil-анимации svg-иконок и реверсивной анимации при следующем клике — в ...
Сергей's user avatar
9 голосов
2 ответа
393 показа

Анимированный лоадер "знак бесконечности"

Я хочу повторить всю анимацию из gif Для этого я нарисовал и даже криво сделал эту змейку но не могу понять что надо сделать что бы не было косячка в самом начале анимации и как сделать подобное ...
Monkey Mutant's user avatar
3 голоса
1 ответ
221 показ

Почему не работает stroke-dashoffset в SVG?

Есть один хороший скрипт, который к сожалению, работает только на сайте codepen.io. Я пытаюсь портировать его на SVG. Сначала я делал с помощью <animate> и <animateTransform>. Но что-то не ...
DiD's user avatar
  • 7,526
6 голосов
1 ответ
122 показа

Можно ли добиться такого же эффекта?

Появился вопрос не по теме SVG => Как анимировать последовательно UIBezier линии Разумеется что это можно реализовать на smil Вот что я сделал <svg viewBox="0 0 500 150" xmlns="http://www.w3....
Monkey Mutant's user avatar
4 голоса
1 ответ
85 показов

Ориентация поворота круглого изображения в SVG progress

Я пытаюсь создать круглый индикатор выполнения (как показано на изображении ниже). Прогрессия основана на процентах и будет двигаться по кругу до этого процента. У меня прогрессия (линия) движется, но ...
Alexandr_TT's user avatar
2 голоса
2 ответа
38 показов

Как выполнить анимацию из последнего состояния анимации SVG без использования JavaScript?

Я учусь использовать SVG и / или css clip-path. Я создал, что-то вроде этого: <svg style="width:300px;height:300px;" viewBox="0 0 100 200"> <text id="bunny" y="50">To Bunny</...
Alexandr_TT's user avatar
3 голоса
1 ответ
107 показов

Является ли SMIL для SVG устаревшим (deprecated), нерекомендуемым или… приостановленным, но в конечном итоге будет прекращен?

TL; DR: Я пытаюсь понять, стоит ли тратить время на освоение SMIL. Официальная версия (по крайней мере, от Blink, но, возможно, не от Gecko), похоже, заключается в том, что эта технология анимации ...
Alexandr_TT's user avatar
2 голоса
1 ответ
49 показов

Анимация SMIL не заканчивается при наведении курсора мыши

Я пытаюсь создать иконку SVG, которая будет анимироваться с использованием SMIL (ну, мне все равно, SMIL это или CSS, я просто не хочу использовать JS) при наведении курсора, и я ушел довольно далеко, ...
Alexandr_TT's user avatar
3 голоса
2 ответа
136 показов

Как заставить circle двигаться по path с определенного места?

Как заставить красный шарик #circle следовать по окружности, начиная с позиции #mainCircle по нажатию? <svg class="skillSvg" width="430" height="430" viewBox="0 0 ...
Eugene Dark's user avatar
2 голоса
1 ответ
104 показа

Как применить одну SMIL анимацию к нескольким SVG элементам

подскажите, пожалуйста, как применить одну SMIL анимацию к нескольким SVG элементам?
HTMLProgrammer's user avatar
6 голосов
1 ответ
101 показ

Как работают и зачем нужны SVG свойства accumulate="sum" , additive="sum", fill="freeze"?

Разбираясь с этим вопросом Как сделать что бы SVG анимация продолжалась с того же места где и закончилась Ещё надеюсь что найдётся решение, поэтому возникает вопрос как работают аттрибуты SVG ...
Дмитрий Полянин's user avatar
3 голоса
2 ответа
248 показов

Как сделать, чтобы SVG анимация продолжалась с того же места, где и закончилась

Есть анимация вращения палки по кругу. Она запускается по наведению мыши и прекращает вращаться по убиранию мыши с изображения. Мне надо сделать так, что бы при повторном наведении анимация ...
Дмитрий Полянин's user avatar
7 голосов
1 ответ
105 показов

Как сделать такой трюк с анимацией?

Я написал анимацию, обычное стандартная ситуация когда некий шарик движется по пути, анимация зациклена. Смысл вопроса вот в чём: я хочу что бы в тот момент когда чёрный шарик проходит над цифрой то ...
Monkey Mutant's user avatar
1 голос
0 ответов
66 показов

Ресет SVG анимации

Можно ли только с помощью SMIL анимации плавно вернуть SVG к изначальному состоянию (при втором клике на окружность)? 1. 2. svg { width:50%; height:50%; } <svg xmlns="http://www.w3.org/...
Поляков Роман's user avatar
1 голос
2 ответа
165 показов

Как сделать, чтобы фигура, движущаяся по траектории SVG, меняла свое положение относительно траектории?

Имеется траектория с path. Нужно чтобы эллипс менял свой угол, чтобы перерывать траекторию одинаково по всему пути. Вот код:` <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www....
Илья Яковлев's user avatar
4 голоса
4 ответа
951 показ

Плавный морфинг одного path в другой path

Как можно произвести анимацию формы одного объекта в другую форму. Имеется обычный круг, который оконтурил в объект path. И есть shape, который имеет многие кривые и совсем другую структуру. ...
MoloF's user avatar
  • 4,414
3 голоса
1 ответ
43 показа

SVG Четкий контроль тайминга анимации передвижения?

Подскажите, можно ли добиться в SVG чёткого контроля времени анимирования при анимации перемещения. Приведу простой пример #preloader { position: absolute; top: 50%; left: 50%; ...
BlackStar1991's user avatar
3 голоса
1 ответ
44 показа

Делаю анимацию.. как определить центр?

Делаю анимацию вращение формы и она крутится, всё как положено но ось находится где в непонятном месте... Что надо сделать что бы g.znak крутился точно в центре сердца ? <svg viewBox="0 0 150 ...
Monkey Mutant's user avatar
4 голоса
2 ответа
1k показов

Как правильно задать центр вращения для анимации SVG элемента?

Есть rect, которому нужно задать анимацию поворота "туда-обратно", неважно через CSS-анимации или через SMIL, анимация всё равно простая. Но возникает трудность с определением точки, от которой ...
Amphyx's user avatar
  • 229
1 голос
2 ответа
564 показа

Анимация значения text в SVG

Есть ли в SVG возможность, при помощи тега animate, animateTransform, set или какого-нибудь другого тега, реализовать анимацию смены текста с одного на другой?
fin's user avatar
  • 71
4 голоса
2 ответа
167 показов

Выполнить keyframes или иным способом анимировать большое количество ellipse?

Мой прошлый вопрос был задан не корректно так как отсуствовала сама возможность анимировать эту фигуру. Изначально требовалось создать обычный символ/букву или слово. В итоге надо получить вот ...
Monkey Mutant's user avatar
12 голосов
3 ответа
317 показов

Как анимировать рисование подобной фигуры?

Своял такой текст в illustrator вот такую штуку Так как сниппет ruSO не пропускает количество символов я выложил SVG в codepen _https://codepen.io/topicstarter/pen/YBVWKx Как сделать анимацию ...
Monkey Mutant's user avatar
7 голосов
3 ответа
643 показа

Как сделать morphing анимацию частей SVG элемента по наведению мышки?

Подскажите, есть ли возможность без подключения сторонних библиотек (GSAP / SVG-Morpheus) произвести изменения формы? Приведу пример: .game_block { position: relative; width: 100%; ...
BlackStar1991's user avatar
2 голоса
1 ответ
56 показов

SVG / SMIL Последователый вызов двух анимаций

Подскажите, как при работе со SMIL анимацией в SVG добиться эффекта последовательного выполнения двух анимаций. Приведу пример #letters { display: block; height: 100%; min-height: ...
BlackStar1991's user avatar
5 голосов
1 ответ
337 показов

Поиск ошибок в приложениях SVG

На практике очень часто случается, что приложение SVG должно работать, фрагменты кода, как и в других работающих приложениях точно такие же, но любые попытки найти ошибку, заставить работать новое ...
Alexandr_TT's user avatar
3 голоса
1 ответ
59 показов

SVG - проблемы с анимацией

У меня есть некоторые фигуры, которые я вращаю, используя две кнопки,- одну для вращения по часовой стрелке, а другую против часовой стрелки: var svgNS = "http://www.w3.org/2000/svg"; ...
Alexandr_TT's user avatar
4 голоса
2 ответа
410 показов

Каким образом создаются SVG анимации или трансформации?

На многих сайтах я видел как svg path в виде треугольника по hover/click превращается в круг, и потом в книгу или ещё в какой то объект! Сам вопрос: как это работает и что нужно анимировать? Я ...
user avatar