У меня есть изображение svg. И я хочу создать «заполняющую анимацию» на этом изображении, чтобы изображение начало наполняться цветом с одного конца изображения, а затем полностью заполнять изображение некоторым цветом. Скажем, на изображении цвет начнет заполняться с крайнего правого края и медленно заполняется, как если бы он рисовал фактическое изображение. Это можно сделать в javascript.SVG анимация заполнения с помощью javascript
Самый простой способ - использовать jQuery, смешанный с сторонней библиотекой с именем Velocity.
Velocity - это библиотека, которая специально предназначена для цветов, преобразований, петель, смягчений, SVG и прокрутки анимаций.
$("#rect")
.delay(1000)
.velocity({
fill: "#ff0000",
height: "100",
width: "100"
}, {
duration: 1000
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.js"></script>
<svg>
<rect id="rect" width="25" height="25" x="10%" y="10%" fill="gray" stroke="rgba(80, 80, 80, 1)" stroke-width="0px" />
</svg>Очевидно, что это демо-версия очень проста, но есть много настроек доступны и без какого-либо предварительного кода в вашем вопросе будет трудно получить точный эффект, который вы ищете.
Добро пожаловать на переполнение стека! Пожалуйста, покажите нам свой код, что вы сделали до сих пор? Есть ли * конкретная * проблема, в которой вам нужна помощь? – Tobbe
Вы можете достичь этого, заполнив форму линейным градиентом, а затем оживляя остановки. –
У меня есть изображение svg. Я использовал raphael-svg-import-classic плагин для импорта изображения svg. Теперь мне нужно выполнить анимацию заполнения элемента. –