Вопросы с меткой [smil]
Руководство по использованию метки smil отсутствует.
28
вопросов
0
голосов
0
ответов
60
показов
Анимация фона svg картинки
Имеется такое задание:
После загрузки страницы логотип заполняется черным цветом снизу вверх в начале логотип имеет только контур черного цвета.
Не знаю как реализовать. В сети видел разные варианты ...
2
голоса
1
ответ
49
показов
Можно ли оптимизировать js-код для запуска и реверса smil-анимации при клике на svg-иконки когда их несколько?
Помогите, пожалуйста, разобраться, можно ли как-то оптимизировать js-код для реализации функционала запуска по клику вложенной smil-анимации svg-иконок и реверсивной анимации при следующем клике — в ...
9
голосов
2
ответа
393
показа
Анимированный лоадер "знак бесконечности"
Я хочу повторить всю анимацию из gif
Для этого я нарисовал и даже криво сделал эту змейку но не могу понять что надо сделать что бы не было косячка в самом начале анимации и как сделать подобное ...
3
голоса
1
ответ
221
показ
Почему не работает stroke-dashoffset в SVG?
Есть один хороший скрипт, который к сожалению, работает только на сайте codepen.io.
Я пытаюсь портировать его на SVG. Сначала я делал с помощью <animate> и <animateTransform>. Но что-то не ...
6
голосов
1
ответ
122
показа
Можно ли добиться такого же эффекта?
Появился вопрос не по теме SVG => Как анимировать последовательно UIBezier линии
Разумеется что это можно реализовать на smil
Вот что я сделал
<svg viewBox="0 0 500 150" xmlns="http://www.w3....
4
голоса
1
ответ
85
показов
Ориентация поворота круглого изображения в SVG progress
Я пытаюсь создать круглый индикатор выполнения (как показано на изображении ниже). Прогрессия основана на процентах и будет двигаться по кругу до этого процента.
У меня прогрессия (линия) движется, но ...
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</...
3
голоса
1
ответ
107
показов
Является ли SMIL для SVG устаревшим (deprecated), нерекомендуемым или… приостановленным, но в конечном итоге будет прекращен?
TL; DR: Я пытаюсь понять, стоит ли тратить время на освоение SMIL. Официальная версия (по крайней мере, от Blink, но, возможно, не от Gecko), похоже, заключается в том, что эта технология анимации ...
2
голоса
1
ответ
49
показов
Анимация SMIL не заканчивается при наведении курсора мыши
Я пытаюсь создать иконку SVG, которая будет анимироваться с использованием SMIL (ну, мне все равно, SMIL это или CSS, я просто не хочу использовать JS) при наведении курсора, и я ушел довольно далеко, ...
3
голоса
2
ответа
136
показов
Как заставить circle двигаться по path с определенного места?
Как заставить красный шарик #circle следовать по окружности, начиная с позиции #mainCircle по нажатию?
<svg class="skillSvg" width="430" height="430" viewBox="0 0 ...
2
голоса
1
ответ
104
показа
Как применить одну SMIL анимацию к нескольким SVG элементам
подскажите, пожалуйста, как применить одну SMIL анимацию к нескольким SVG элементам?
6
голосов
1
ответ
101
показ
Как работают и зачем нужны SVG свойства accumulate="sum" , additive="sum", fill="freeze"?
Разбираясь с этим вопросом Как сделать что бы SVG анимация продолжалась с того же места где и закончилась
Ещё надеюсь что найдётся решение, поэтому возникает вопрос как работают аттрибуты SVG ...
3
голоса
2
ответа
248
показов
Как сделать, чтобы SVG анимация продолжалась с того же места, где и закончилась
Есть анимация вращения палки по кругу.
Она запускается по наведению мыши и прекращает вращаться по убиранию мыши с изображения.
Мне надо сделать так, что бы при повторном наведении анимация ...
7
голосов
1
ответ
105
показов
Как сделать такой трюк с анимацией?
Я написал анимацию, обычное стандартная ситуация когда некий шарик движется по пути, анимация зациклена.
Смысл вопроса вот в чём: я хочу что бы в тот момент когда чёрный шарик проходит над цифрой то ...
1
голос
0
ответов
66
показов
Ресет SVG анимации
Можно ли только с помощью SMIL анимации плавно вернуть SVG к изначальному состоянию (при втором клике на окружность)?
1.
2.
svg {
width:50%;
height:50%;
}
<svg xmlns="http://www.w3.org/...
1
голос
2
ответа
165
показов
Как сделать, чтобы фигура, движущаяся по траектории SVG, меняла свое положение относительно траектории?
Имеется траектория с path. Нужно чтобы эллипс менял свой угол, чтобы перерывать траекторию одинаково по всему пути.
Вот код:`
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www....
4
голоса
4
ответа
951
показ
Плавный морфинг одного path в другой path
Как можно произвести анимацию формы одного объекта в другую форму.
Имеется обычный круг, который оконтурил в объект path. И есть shape, который имеет многие кривые и совсем другую структуру. ...
3
голоса
1
ответ
43
показа
SVG Четкий контроль тайминга анимации передвижения?
Подскажите, можно ли добиться в SVG чёткого контроля времени анимирования при анимации перемещения. Приведу простой пример
#preloader {
position: absolute;
top: 50%;
left: 50%;
...
3
голоса
1
ответ
44
показа
Делаю анимацию.. как определить центр?
Делаю анимацию вращение формы и она крутится, всё как положено но ось находится где в непонятном месте...
Что надо сделать что бы g.znak крутился точно в центре сердца ?
<svg viewBox="0 0 150 ...
4
голоса
2
ответа
1k
показов
Как правильно задать центр вращения для анимации SVG элемента?
Есть rect, которому нужно задать анимацию поворота "туда-обратно", неважно через CSS-анимации или через SMIL, анимация всё равно простая. Но возникает трудность с определением точки, от которой ...
1
голос
2
ответа
564
показа
Анимация значения text в SVG
Есть ли в SVG возможность, при помощи тега animate, animateTransform, set или какого-нибудь другого тега, реализовать анимацию смены текста с одного на другой?
4
голоса
2
ответа
167
показов
Выполнить keyframes или иным способом анимировать большое количество ellipse?
Мой прошлый вопрос был задан не корректно так как отсуствовала сама возможность анимировать эту фигуру.
Изначально требовалось создать обычный символ/букву или слово.
В итоге надо получить вот ...
12
голосов
3
ответа
317
показов
Как анимировать рисование подобной фигуры?
Своял такой текст в illustrator вот такую штуку
Так как сниппет ruSO не пропускает количество символов я выложил SVG в codepen
_https://codepen.io/topicstarter/pen/YBVWKx
Как сделать анимацию ...
7
голосов
3
ответа
643
показа
Как сделать morphing анимацию частей SVG элемента по наведению мышки?
Подскажите, есть ли возможность без подключения сторонних библиотек (GSAP / SVG-Morpheus) произвести изменения формы? Приведу пример:
.game_block {
position: relative;
width: 100%;
...
2
голоса
1
ответ
56
показов
SVG / SMIL Последователый вызов двух анимаций
Подскажите, как при работе со SMIL анимацией в SVG добиться эффекта последовательного выполнения двух анимаций.
Приведу пример
#letters {
display: block;
height: 100%;
min-height: ...
5
голосов
1
ответ
337
показов
Поиск ошибок в приложениях SVG
На практике очень часто случается, что приложение SVG должно работать, фрагменты кода, как и в других работающих приложениях точно такие же, но любые попытки найти ошибку, заставить работать новое ...
3
голоса
1
ответ
59
показов
SVG - проблемы с анимацией
У меня есть некоторые фигуры, которые я вращаю, используя две кнопки,- одну для вращения по часовой стрелке, а другую против часовой стрелки:
var svgNS = "http://www.w3.org/2000/svg";
...
4
голоса
2
ответа
410
показов
Каким образом создаются SVG анимации или трансформации?
На многих сайтах я видел как svg path в виде треугольника по hover/click превращается в круг, и потом в книгу или ещё в какой то объект!
Сам вопрос: как это работает и что нужно анимировать?
Я ...