Анимация непрерывной линии по горизонтали и по вертикали

Question

Я пытаюсь оживить (перейти) к «чертежу» пути/линии SVG. Конкретная строка, которую я хочу сделать, будет идти 300px вправо, а затем продолжить 100px вниз, а затем 200px влево. Но это была бы одна непрерывная линия без кривых или перерывов.

В настоящее время я могу заставить его работать, построив линии индивидуально и применяя переход. Начните с X1, Y1/X2, Y2 - переход на новый X2, Y2 - для этой продолжительности с этой задержкой и повторением, повторением и повторением.

Есть ли более простой способ сделать это? Например, используя один элемент SVG вместо 3 и, например, заполнить координаты X/Y из массива?

Любые конкретные примеры или указание на меня в общем направлении будут оценены.

Благодаря

Answer 1

Это вполне возможно, хотя это немного изворотливым, чтобы получить эффект, который вы хотите. Это связано с установкой очень большого stroke-dash-array (фактически всей длины вашего пути), а затем установки dash-offset (также длины вашей фигуры). Вы устанавливаете это так, чтобы ни одна из строк не была изначально видимой, и измените мерцание так, чтобы линия попадала в поле зрения.

Существует очень хорошая статья об CSS-трюках SVG Line Animation, которая объясняет принцип. Я написал маленький помощник, чтобы сделать это для меня в D3 который выглядит следующим образом:

d3.selectAll(".draw") 
 
    .style("stroke-dasharray", function() { return this.getTotalLength(); }) 
 
    .style("stroke-dashoffset", function() { return this.getTotalLength(); }) 
 
    .transition() 
 
    .duration(3000) 
 
    .style("stroke-dashoffset", 0);

.draw { 
 
    fill: #232a29; 
 
    stroke: #232a29; 
 
    stroke-width: 2px; 
 
    fill-rule:nonzero; 
 
    fill-opacity:0; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<svg width="500" height="500"> 
 
    <g> 
 
     <g transform="translate(0,600)scale(1,-1)"> 
 
      <!-- Circle --> 
 
      <path class="draw circle" d="m 97.44,308.52 c 0,90.53 73.42,163.92 163.98,163.92 90.56,0 163.98,-73.39 163.98,-163.92 0,-90.53 -73.42,-163.92 -163.98,-163.92 -90.56,0 -163.98,73.39 -163.98,163.92 z" /> 
 
      </g> 
 
    </g> 
 
</svg>