css - 如何更改 SVG 线条动画的起点？

Question

我不熟悉 SVG 和动画。我试图简单地制作一个动画，其中六边形从最高点开始绘制自己。但是，动画从右中点开始。解决这个问题的最佳方案是什么？

.root {
  background-color: black;
}
.shape {
    fill: none;
    stroke: #61fbde;
    stroke-width: 3px;
    stroke-dasharray: 1300px;
    stroke-dashoffset: 1300px;
    animation: move 3s linear forwards;
}

@keyframes move {
    100% {
        stroke-dashoffset: 0;
    }
}

<div class="root">

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="129.204 94.714 359.102 415.224" width="355.1" height="411.22"><defs><path class="shape" d="M485.31 197.76v206.12L307.76 506.94 130.2 403.88V197.76L307.76 95.71l177.55 102.05z" id="a"/></defs><use xlink:href="#a" fill-opacity="0" stroke="#61fbde"/></svg>

</div>

Answer 1

您需要更改 d 属性的值，以便路径从动画需要开始的地方开始

.root {
  background-color: black;
}
.shape {
    fill: none;
    stroke: #61fbde;
    stroke-width: 3px;
    stroke-dasharray: 1300px;
    stroke-dashoffset: 1300px;
    animation: move 3s linear forwards;
}

@keyframes move {
    100% {
        stroke-dashoffset: 0;
    }
}

<div class="root">

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="129.204 94.714 359.102 415.224" width="355.1" height="411.22"><defs><path class="shape" d="
M307.76 95.71
L485.31 197.76
v206.12
L307.76 506.94 130.2 403.88
V197.76
L307.76 95.71
z" id="a"/></defs><use xlink:href="#a" fill-opacity="0" stroke="#61fbde"/></svg>

</div>