Question

所以我试图了解svg动画。

出于某种原因，我的起点轮换不起作用请参阅以下动画我想从另一边开始动画线在this explanation之后我发现我需要使用旋转但是，如果我使用它并没有显示出来。我错过了什么？

所以我将transform="rotate(180)"添加到了该行的路径中注意：我没有将旋转添加到当前代码段。

＆＃13;

body {
	background: #85d1d3;	
}
.container{
	max-width:400px;
	margin: 0 auto;
}

@keyframes line-color-ffffff {	0% {fill: #85d1d3;} 	50% {fill: #85d1d3;	stroke-dashoffset: 0;}	100% {fill: #85d1d3;stroke-dashoffset: 0;} }

.line-color-ffffff{animation: line-color-ffffff 4s ease forwards; stroke-dasharray: 20; stroke-dashoffset: 199;}

＆＃13;

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800">
   <title>svg</title>
   <g id="background">
    <rect width="400" height="400" fill="#85d1d3"/>
   </g>
  <g>
		<path class="line-color-ffffff" d="M471.954 512.869 467.207 510.091 464.528 508.522 406.469 474.539 401.11 471.402 396.364 468.624 401.085 465.803 403.354 464.447 439.663 442.751 444.201 440.039 448.923 437.218 444.159 434.468 441.628 433.007 415.474 417.907 410.412 414.984 405.649 412.234" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
  </g>
  </svg>

＆＃13;

Answer 1

它实际上非常简单，只需将100％填充0％填充！

@keyframes line-color-ffffff {  0% {fill: #85d1d3;stroke-dashoffset: 0;}    50% {fill: #85d1d3; stroke-dashoffset: 0;}  100%{fill: #85d1d3;}   }

以下是一个工作小提琴：https://jsfiddle.net/g6Lpcmqe/

旋转svg动画的起点

1 个答案: