Как закрыть разрыв в вершине треугольника SVG после рисования анимации

Question

Я работаю над проектом с большим количеством SVG-анимации. У меня нет опыта в этом. Я много гуглил, не нашел решения своей проблемы.

Проблема в том, что при анимации определенных фигур анимация оставляет зазор в форме. Это наиболее распространено на фигурах с углами, как треугольник.

Я видел, как это было успешно сделано в Интернете, я просто не понимаю, как. Я сделал простую анимацию, используя Vivus Instant, которую вы можете увидеть в этом CodePen: Ссылка на CodePen

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 242.89 367.25" class="start" style=""><title>triangeltest</title><path style="fill:#fff;stroke:#1d1d1b;stroke-miterlimit:10;stroke-width:15px" d="M121.44,23.89L10.38,359.75L232.51,359.75L121.44,23.89Z" class="fTJakOHn_0"></path><style data-made-with="vivus-instant">.fTJakOHn_0{stroke-dasharray:930 932;stroke-dashoffset:931;}.start .fTJakOHn_0{animation:fTJakOHn_draw 3000ms ease-in 0ms forwards;}@keyframes fTJakOHn_draw{100%{stroke-dashoffset:0;}}@keyframes fTJakOHn_fade{0%{stroke-opacity:1;}94.44444444444444%{stroke-opacity:1;}100%{stroke-opacity:0;}}</style></svg>

Существуют ли какие-либо библиотеки, которые я могу использовать, чтобы автоматически избежать этой проблемы? Нужно ли экспортировать фигуры из Illustrator определенным образом?

Answer 1

Что я хотел бы сделать, это просто отключить массив тире после завершения анимации.

@keyframes fTJakOHn_draw {
  99.9% { stroke-dashoffset:0; stroke-dasharray:930 932; }
  100% { stroke-dasharray: none; }
}

Если анимация должна быть в состоянии перезапустить после анимации с замиранием, вам также может понадобиться поместить шаблон тиреобратно потом.

@keyframes fTJakOHn_fade {
  0% { stroke-opacity:1; }
  94.44444444444444% { stroke-opacity:1; stroke-dasharray: none; }
  100% { stroke-opacity:0; stroke-dasharray:930 932; }
}

Пример:

.fTJakOHn_0 {
  stroke-dasharray:930 932;
  stroke-dashoffset:931;
}

.start .fTJakOHn_0 {
  animation:fTJakOHn_draw 3000ms ease-in 0ms forwards;
}

@keyframes fTJakOHn_draw {
  99.9% { stroke-dashoffset:0; stroke-dasharray:930 932; }
  100% { stroke-dasharray: none; }
}

@keyframes fTJakOHn_fade {
  0% { stroke-opacity:1; }
  94.44444444444444% { stroke-opacity:1; stroke-dasharray: none; }
  100% { stroke-opacity:0; stroke-dasharray:930 932; }
}

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 242.89 367.25" class="start" style=""><title>triangeltest</title>

<path style="fill:#fff;stroke:#1d1d1b;stroke-miterlimit:10;stroke-width:15px" d="M121.44,23.89L10.38,359.75L232.51,359.75L121.44,23.89Z" class="fTJakOHn_0"></path>

</svg>

Answer 2

Не уверен, есть ли какой-нибудь более простой способ сделать это, самое близкое решение, которое я недавно нашел, это использование пути клипа на самом SVG. Я только что добавил это в ваш пример кода в качестве тестера:

svg {
    clip-path: polygon(50% 6.4%, 0 100%, 100% 100%);
}

Вы можете увеличить ширину хода, если это необходимо? Это не красиво, но это дает результат.

Answer 3

Одним из возможных решений было бы добавление stroke-linecap:round; stroke-linejoin:round; для треугольника:

Layer_1.addEventListener("click",()=>{Layer_1.classList.toggle("start")})

svg{border:1px solid;width:200px;}

<svg id="Layer_1" viewBox="0 0 242.89 367.25" class="start" ><title>triangeltest</title>
  <path style="fill:#fff;stroke:#1d1d1b;stroke-miterlimit:10;stroke-width:15px" d="M121.44,23.89L10.38,359.75L232.51,359.75L121.44,23.89Z" class="fTJakOHn_0"></path>
  <style data-made-with="vivus-instant">
    .fTJakOHn_0{
      stroke-dasharray:930;
      stroke-dashoffset:930;
      stroke-linecap:round;
      stroke-linejoin:round;
    }
    .start .fTJakOHn_0{
      animation:fTJakOHn_draw 3000ms ease-in 0ms forwards;
    }
    @keyframes fTJakOHn_draw{
      100%{stroke-dashoffset:0;}
    }</style> 
</svg>