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

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

.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>