jquery - 动画后如何在 SVG 中保持原始破折号？

Question

我有一个 SVG，我正在尝试制作动画，我正在使用以下 jQuery。我真正想做的是制作正在绘制的虚线的动画，同时保持点完好无损。

$(function () {

    $("#dotted-lines path").css({
        'fill': 'none'
    });

    var length;

    $("#dotted-lines path").each(function () {

        var $this = $(this);
        length = $this[0].getTotalLength();
        $this.attr('data-length', length).css({
            'stroke-dashoffset': length,
                'stroke-dasharray': length
        });

    });


    $("#dotted-lines path").each(function () {

        $(this).animate({
            'stroke-dashoffset': 0
        }, {

            duration: 1000,
            easing: 'linear',
            complete: function () {

            }
        });

    });

});

上面的代码可以在action中看到 HERE ，现在线条画得很完美，就像我想要的动画一样，但不幸的是，线条不再是虚线了。那么我该如何维护原来的破折号呢？

我尝试的另一件事是，在下面一行:

$this.attr('data-length', length).css({'stroke-dashoffset': length, 'stroke-dasharray': length});

如果我把它改成:

        $this.attr('data-length', length).css({'stroke-dashoffset': length, 'stroke-dasharray': "5,3"});

我得到了破折号，但我没有得到绘图效果。正如我所说，我如何保持原来的破折号？

Answer 1

我在路径中添加了一个线性渐变:stroke: url(#reveale);
这是看起来像这样的 svg 渐变:

    <linearGradient id="reveale">
      <stop offset="0%" id="move-opacity" stop-opacity="1" stop-color="black" />
      <stop offset="0%" id="last-opacity" stop-opacity="0" stop-color="black" />
    </linearGradient>

我使用 jquery 为间隔内的偏移设置动画。
linearGradient 中有两种停止色，用于创建从纯色到透明色的即时过渡。

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

#dotted-lines {
  stroke: url(#reveale);
  fill: none;
  stroke-miterlimit: 10;
  stroke-dasharray: 0.9795;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve" width="50%">
  <style type="text/css">
    .st0 {
      stroke: #000000;
      stroke-miterlimit: 10;
    }
    .st1 {
      fill: #FFDE17;
    }
    .st2 {
      fill: none;
      stroke: #000000;
      stroke-miterlimit: 10;
    }
    .st3 {
      fill: none;
      stroke: #000000;
      stroke-miterlimit: 10;
      stroke-dasharray: 0.9795, 0.9795;
    }
  </style>
  <defs>
    <linearGradient id="reveale">
      <stop offset="0%" id="move-opacity" stop-opacity="1" stop-color="black" />
      <stop offset="0%" id="last-opacity" stop-opacity="0" stop-color="black" />
    </linearGradient>
  </defs>
  <path id="XMLID_9_" class="st0" d="M50,15.3H8.4c-2.8,0-5,2.3-5,5v58c0,2.8,2.3,5,5,5H50c2.8,0,5-2.3,5-5v-58
			C55,17.6,52.8,15.3,50,15.3z M14,19.4h28.1c0.9,0,1.6,0.7,1.6,1.6s-0.7,1.6-1.6,1.6H14c-0.9,0-1.6-0.7-1.6-1.6S13.1,19.4,14,19.4z
			 M28.8,82.8c-1.6,0-3-1.3-3-3s1.3-3,3-3s3,1.3,3,3S30.4,82.8,28.8,82.8z M48.9,69.2c0,2.8-2.3,5-5,5H13.7c-2.8,0-5-2.3-5-5V32
			c0-2.8,2.3-5,5-5h30.3c2.8,0,5,2.3,5,5V69.2z" />
  <path id="XMLID_4_" class="st1" d="M23,48.8h10.2V45c0-1.4-0.5-2.6-1.5-3.6s-2.2-1.5-3.6-1.5c-1.4,0-2.6,0.5-3.6,1.5
			c-1,1-1.5,2.2-1.5,3.6V48.8L23,48.8z M39.5,50.7v11.4c0,0.5-0.2,1-0.6,1.3c-0.4,0.4-0.8,0.6-1.3,0.6h-19c-0.5,0-1-0.2-1.3-0.6
			c-0.4-0.4-0.6-0.8-0.6-1.3V50.7c0-0.5,0.2-1,0.6-1.3s0.8-0.6,1.3-0.6h0.6V45c0-2.4,0.9-4.5,2.6-6.3c1.7-1.7,3.8-2.6,6.3-2.6
			s4.5,0.9,6.3,2.6s2.6,3.8,2.6,6.3v3.8h0.6c0.5,0,1,0.2,1.3,0.6C39.3,49.7,39.5,50.1,39.5,50.7L39.5,50.7z" />
  <g id="dotted-lines">
    <g id="XMLID_20_">
      <path id="XMLID_22_" d="M59.2,58.4c3.1-4.6,15.5-20.1,37-15.4" />
    </g>
  </g>
  <polyline id="XMLID_3_" class="st2" points="97.3,40.8 99,44.2 96.3,46.4 " />
</svg>