css - 如何防止 SVG 箭头被覆盖

Question

我制作了这个简单的 SVG 动画 HERE ，绘制虚线的代码如下:

$(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");

}); 

现在，如果您清楚地注意到即使箭头被虚线箭头覆盖，一旦绘制了线，如何防止这种情况发生？

Answer 1

实际的问题是因为生成箭头的多边形已经有生成黄色填充的class='st0'并且下面的代码也添加了一个黄色渐变作为箭头的 笔划，因此您最终会看到两者。

#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;
}

要解决此问题，请将黄色渐变仅应用于 g 中的 line 和 path 元素，如下面的代码块所示。

#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