如何更改 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>

Answer 2

允许您从任何地方开始动画而无需重新绘制形状的另一个想法

可用于stroke-dasharray画线动画

移动动画起点 stroke-dashoffset

总行长度为1232px

完全隐藏线-stroke-dasharray = "0, 1232"
线可见 - stroke-dasharray =" 1232, 0 "

因此，对于画线动画，需要将笔画长度从零增加到最大值-1232px

@keyframes move {
     0% {
        stroke-dasharray: 0, 1232;
    }
    100% {
        stroke-dasharray: 1232,0;
    }
}

为了将动画的起始点移动到顶部六边形

stroke-dashoffset="205.3"

.root {
  width:25%;
  height:25%;
  background-color: black;
}
.shape {
    fill: none;
    stroke: #61fbde;
    stroke-width: 5px;
    stroke-dasharray: 0,1232px;
    stroke-dashoffset: 205.3px;
    animation: move 3s linear forwards;
}

@keyframes move {
     0% {
        stroke-dasharray: 0, 1232;
    }
    100% {
        stroke-dasharray: 1232,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" >
<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"  /> 
  </svg>

</div>

使用这种方法，您可以从任何地方开始动画，例如，从六边形的底部顶点

将直线动画的起点移动到六边形的底部stroke-dashoffset: 821.3px;

.root {
width:25%;
height:25%;
  background-color: black;
}
.shape {
    fill: none;
    stroke: #61fbde;
    stroke-width: 5px;
    stroke-dasharray: 0,1232px;
    stroke-dashoffset: 821.3px;
    animation: move 3s linear forwards;
}

@keyframes move {
     0% {
        stroke-dasharray: 0, 1232;
    }
    100% {
        stroke-dasharray: 1232,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" >
<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"  /> 
  </svg>

</div>

从一个点用两条对称线绘制的例子

.root {
width:25%;
height:25%;
  background-color: black;
}
.shape {
    fill: none;
    stroke: #61fbde;
    stroke-width: 5px;
    stroke-dasharray: 0,1232px;
    stroke-dashoffset: 821.3px;
}

<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" >
<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" >
  <animate attributeName="stroke-dasharray" dur="4s" values="0,616 0,616;0,0  1232,0" repeatCount="indefinite" />
 </path>

 </defs>
  <use xlink:href="#a"  /> 
  </svg>

</div>

带有 dicsrete 绘图的六边形动画示例

.root {
width:25%;
height:25%;
  background-color: black;
}
.shape {
    fill: none;
    stroke: #61fbde;
    stroke-width: 5px;
    stroke-dasharray: 0,1232px;
    stroke-dashoffset: 205.3px;
}

<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" >
<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" >
    <animate
   attributeName="stroke-dasharray"
   dur="3s"
   values="
   0,1232;
   205.3,1027;
   410.6,822;
   616,616;
   822,410.6;
   1027.3,205.3;
   1232,0"
   calcMode="discrete"
   repeatCount="indefinite" />
 </path>

 </defs>
  <use xlink:href="#a"  /> 
  </svg>

</div>

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

How do I change the starting point of an SVG line animation?

css

animation

svg

svg-animate