Как добавить анимированный градиент к пути SVG?
У меня есть такой сердечный путь svg:
<svg viewBox = "0 0 100 100">
<path className = "" d = "M20,31 C15.4189994,27.2225585 12.5023327,24.2225585 11.25,22 C10.2743515,20.6156479 10,19.6181623 10,18.1428571 C10,15.5113854 12.4883456,13 15,13 C17.3176009,13 18.9621484,13.8491346 20,15.5714286 C21.0382977,13.8491346 22.6828452,13 25,13 C27.5116544,13 30,15.5113854 30,18.1428571 C30,19.6181623 29.7256485,20.6156479 28.75,22 C27.497816,24.2225585 24.5811493,27.2225585 20,31 Z" />
</svg>
И я бы хотел добавить к нему эффект градиента и переместить градиент слева направо, как будто сердце мерцает.
Однако path не принимает свойство background, и если я использую fill, он не принимает градиент в качестве значения. У него также нет свойства background-position (так что я могу перемещать background-position слева направо с помощью @keyframes).
Есть ли способ добиться этого?
это может помочь developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath
—
15.10.2018 10:02
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
10
2
9 526
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 1
Ответ принят как подходящий
Вы можете использовать SMIL анимация SVG. Идея состоит в том, чтобы анимировать остановку цвета или смещение градиента для создания необходимого эффекта:
svg {
border:1px solid;
width:200px;
}<svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink"
viewBox = "10 10 24 24">
<defs>
<linearGradient id = "linear-gradient" x1 = "-100%" y1 = "0" x2 = "200%" y2 = "0" >
<stop offset = "0" stop-color = "red">
<animate attributeName = "offset" values = "0;0.2;0.5" dur = "2s" repeatCount = "indefinite" />
</stop>
<stop offset = "0.5" stop-color = "yellow">
<animate attributeName = "offset" values = "0.5;0.7;0.8;1" dur = "2s" repeatCount = "indefinite" />
</stop>
</linearGradient>
</defs>
<path fill = "url(#linear-gradient)" d = "M20,31 C15.4189994,27.2225585 12.5023327,24.2225585 11.25,22 C10.2743515,20.6156479 10,19.6181623 10,18.1428571 C10,15.5113854 12.4883456,13 15,13 C17.3176009,13 18.9621484,13.8491346 20,15.5714286 C21.0382977,13.8491346 22.6828452,13 25,13 C27.5116544,13 30,15.5113854 30,18.1428571 C30,19.6181623 29.7256485,20.6156479 28.75,22 C27.497816,24.2225585 24.5811493,27.2225585 20,31 Z" />
</svg>Анимация цвета:
svg {
border:1px solid;
width:200px;
}<svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink"
viewBox = "10 10 24 24">
<defs>
<linearGradient id = "linear-gradient" x1 = "0" y1 = "0" x2 = "100%" y2 = "0" >
<stop offset = "0" stop-color = "red">
<animate attributeName = "stop-color" values = "yellow;red" dur = "2s" repeatCount = "indefinite" />
</stop>
<stop offset = "1" stop-color = "yellow">
<animate attributeName = "stop-color" values = "red;yellow" dur = "2s" repeatCount = "indefinite" />
</stop>
</linearGradient>
</defs>
<path fill = "url(#linear-gradient)" d = "M20,31 C15.4189994,27.2225585 12.5023327,24.2225585 11.25,22 C10.2743515,20.6156479 10,19.6181623 10,18.1428571 C10,15.5113854 12.4883456,13 15,13 C17.3176009,13 18.9621484,13.8491346 20,15.5714286 C21.0382977,13.8491346 22.6828452,13 25,13 C27.5116544,13 30,15.5113854 30,18.1428571 C30,19.6181623 29.7256485,20.6156479 28.75,22 C27.497816,24.2225585 24.5811493,27.2225585 20,31 Z" />
</svg>Другая идея - рассмотреть путь внутри маски, а затем запустить CSS-анимацию, чтобы легко анимировать свойства фона:
svg {
border: 1px solid;
width: 200px;
}
.box {
width:200px;
height:200px;
background:linear-gradient(to right,red,green,blue) left/200% 100%;
-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns = "http://www.w3.org/2000/svg" viewBox = "10 10 24 24"><path d = "M20,31 C15.4189994,27.2225585 12.5023327,24.2225585 11.25,22 C10.2743515,20.6156479 10,19.6181623 10,18.1428571 C10,15.5113854 12.4883456,13 15,13 C17.3176009,13 18.9621484,13.8491346 20,15.5714286 C21.0382977,13.8491346 22.6828452,13 25,13 C27.5116544,13 30,15.5113854 30,18.1428571 C30,19.6181623 29.7256485,20.6156479 28.75,22 C27.497816,24.2225585 24.5811493,27.2225585 20,31 Z" /></svg>') center/contain;
mask:url('data:image/svg+xml;utf8,<svg xmlns = "http://www.w3.org/2000/svg" viewBox = "10 10 24 24"><path d = "M20,31 C15.4189994,27.2225585 12.5023327,24.2225585 11.25,22 C10.2743515,20.6156479 10,19.6181623 10,18.1428571 C10,15.5113854 12.4883456,13 15,13 C17.3176009,13 18.9621484,13.8491346 20,15.5714286 C21.0382977,13.8491346 22.6828452,13 25,13 C27.5116544,13 30,15.5113854 30,18.1428571 C30,19.6181623 29.7256485,20.6156479 28.75,22 C27.497816,24.2225585 24.5811493,27.2225585 20,31 Z" /></svg>') center/contain;
animation:change 2s infinite linear alternate;
}
@keyframes change {
to {
background-position:right;
}
}<div class = "box">
</div>Связанный вопрос, чтобы получить более подробную информацию о вычислении фона: Использование процентных значений с background-position на linear-gradient
Полезный совет - используйте библиотеку fakeSMIL js, чтобы сделать ее совместимой с IE / Edge
—
16.10.2018 04:22
Однако не зацикливается. Всегда есть прыжок между концом, чтобы начать снова.
—
15.01.2020 13:09
@ aviya.developer это не было сделано для сквозного прохождения. Прыжок сделан по дизайну. Я только показываю различные техники с использованием SVG.
—
15.01.2020 13:11
@TemaniAfif Что вы обычно используете для коротких анимаций? как предзагрузчики и т. д.? Я баловался svg, и пока он не оказался таким удобным.
—
16.01.2020 13:56
@ aviya.developer, это зависит от анимации, которую вы хотите добиться. Нет универсального решения
—
16.01.2020 13:59
Другие вопросы по теме
Стиль SVG <use> (заполните x% содержимого linearGradient)
Анимация по траектории движения в адаптивном SVG
Как мне разместить 2 SVG бок о бок в контейнере и настроить контейнер по высоте?
Как выбрать компонент React по ID = "" в React (без использования ссылки)
Как я могу использовать% 23 вместо # в Chrome?
Как переместить объект по пути svg с помощью клавиатуры
SVG не отображается в IE11 при использовании svg4everybody, но работает в Firefox и Chrome
Интерактивные многоугольники
Как использовать матричную функцию svg для масштабирования svg обратно с правильной математикой преобразования
Обертывание элемента svg с помощью CSS
Похожие вопросы
Зафиксировать элемент класса в позиции с отзывчивостью
Добавление более одного слайдера изображений javascript на одну страницу
Необходимо удалить или настроить стрелки нумерации страниц из angular mat-paginator
Простой макет плитки CSS
Свернутая панель навигации не закрывается при нажатии кнопки
Установите общий фон для всех компонентов в Angular 6
Разрешение экрана веб-сайта не отображается во всю ширину
Проблема с аккордеоном bootstrap со стрелкой
Как я могу создать горизонтальный FAB в вертикальном FAB с помощью Materialize?
JavaScript / Html - изменить размер / цвет шрифта после 8 десятичных знаков
Просто идея: jsfiddle.net/qraskdyg/1