2

Использую плагин LazyLinePainter для рисования контуров SVG. Но проблема в том, что плагин рисует только линии, но не делает заливку по окончанию процесса рисования. По сему, я решил допилить заливку самостоятельно, но заливка появляется резко, а я бы хотел сделать её плавной. Можно ли как-то плавно изменить значение атрибута?

'onStrokeStart':  function(){
    setTimeout(function(){
        $('#goodwin-logo svg path').attr({
            'fill': 'rgba(255,255,255, 0)',
            'fill-opacity': '1'
        });
        $('#goodwin-logo svg path').fadeIn("slow", function() {
            $(this).attr({
                'fill': 'rgba(255,255,255, 1)'
            })
        });
    }, 2500);
}

1 ответ 1

2

Разобрался самостоятельно, через css:

$(document).ready(function() {
    $('#goodwin-svg path').css({
        'transition': 'fill-opacity 2s ease 1.5s',
        'fill-opacity': '1'
    });
});

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.