Как предотвратить SVG стрелку от того, переопределение

Я сделал это простой SVG анимации HERE, код для рисования пунктирные линии ниже:Как предотвратить SVG стрелку от того, переопределение

$(document).ready(function() { 

    var offset = parseInt($('#move-opacity').attr("offset")); 
    setInterval(function() { 
     $('#move-opacity').attr("offset", offset + "%"); 
     if (offset < 100) { 
     $('#last-opacity').attr("offset", (offset + 1) + "%"); 
     } 
     offset++; 

    }, 25); 

    /* code for secound line animation */ 
    var offset1 = parseInt($('#move-opacity-1').attr('offset')); 
    setInterval(function() { 
     $('#move-opacity-1').attr("offset", offset + "%"); 
     if (offset < 100) { 
     $('#last-opacity-1').attr("offset", (offset + 1) + "%"); 
     } 
     offset++; 

    }, 25); 


    $("#lock").attr("class" , "animated bounceInUp"); 
    $("#quote-icon").attr("class" , "animated bounceInUp delay-05s"); 


    $("#lock").addClass("animated bounceInUp"); 

});

Теперь, если вы заметили, ясно даже стрелка перекрывается с пунктирная стрелка, как только линия будет нарисована, как предотвратить это?

источник

2015-12-01 Alexander Solonik

@MichaelMullany кто вам решать, Что минимален и Что не ?? .. его минимальный уже, я взял несколько плагинов уже выключен, чтобы сделать код минимальным, одним из них являются путевые точки, потому что я хотел анимацию только тогда, когда свиток достиг определенной точки. Я помню тот факт, что проблемы на SO должны быть изолированы для удовлетворения потребностей более широкой аудитории. –

Я не думаю, что это случай мнения или того, кого я думаю, что я должен решить. Минимальный тестовый пример прост: это минимальный объем содержимого/кода, который все еще демонстрирует проблему. Хорошая проблема SO-кода устраняет все посторонние материалы и код, поэтому людям не нужно разбираться с внешними классами и содержанием, чтобы найти проблемный контент. Я часто решал свои проблемы, прежде чем я даже задал вопрос, изолировав проблемный код с помощью этого процесса. Как вы можете видеть, проблема была даже не в вашем JavaScript. –

@ MichaelMullany позвольте мне сказать так, я новичок в svg и очень мало знаю об этом, поэтому очень вероятно, что я получу ошибку, а не желаемый результат, а затем мне понадобится несколько часов или даже день, чтобы эта ошибка была решена. Независимо от того, насколько тривиальна ошибка или ошибка, теперь вместо этого, если бы я спросил человека, который действительно знал о SVG, и работал с ними некоторое время, это, вероятно, займет их несколько минут, чтобы выяснить решение и дать мне ответ (например, http://stackoverflow.com/questions/34013470/how-to-draw-animation-from-end-of-the-line-svg) –

Реальная проблема потому, что polygon, который производит голова стрелки уже class='st0' которая производит желтый цвет заливки и ниже код также добавив желтый цвет градиента как stroke к голове стрелки и, таким образом, вы в конечном итоге увидеть и то и другое.

#dotted-lines-1 { 
    stroke: url(#yellow-gradient); 
    fill: none; 
    stroke-width:3; 
    stroke-miterlimit: 10; 
    stroke-dasharray:4.8732,2.9239; 
} 
#dotted-lines-2 { 
    stroke: url(#yellow-gradient); 
    fill: none !important; 
    stroke-width:3; 
    stroke-miterlimit: 10; 
    stroke-dasharray:4.8732,2.9239; 
}

Чтобы преодолеть эту проблему, применить желтый градиент только к line и path элементов в g как в приведенном ниже блоке кода.

#dotted-lines-1 line, #dotted-lines-1 path { 
    stroke: url(#yellow-gradient); 
    fill: none; 
    stroke-width:3; 
    stroke-miterlimit: 10; 
    stroke-dasharray:4.8732,2.9239; 
} 
#dotted-lines-2 line, #dotted-lines-2 path { 
    stroke: url(#yellow-gradient); 
    fill: none !important; 
    stroke-width:3; 
    stroke-miterlimit: 10; 
    stroke-dasharray:4.8732,2.9239; 
}

Fiddle Demo

источник

2015-12-01 06:48:16 Harry

Как предотвратить SVG стрелку от того, переопределение

ответ

Смежные вопросы