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

实际问题是因为产生箭头的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

如何防止SVG箭头被覆盖

1 个答案: