How to prevent SVG arrow from being override - css

Question

I made this simple SVG animation HERE , The code for drawing the dashed lines is below:
$(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");
});
Now if you notice clearly even the arrow is overridden with a dashed arrow , once the line is drawn , how to prevent this from happening ?

Answer 1

The actual problem is because the polygon that produces the arrow head already has class='st0' which produces a yellow colored fill and the below code is also adding a yellow colored gradient as a stroke to the arrow head and thus you are ending up seeing both.
#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;
}
To overcome the issue, apply the yellow gradient only to the line and path elements within the g like in the below code block.
#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