SVG 直线动画 CSS

Posted 2023-03-06

【中文标题】SVG 直线动画 CSS

【英文标题】：SVG straight line animation CSS

【发布时间】：2018-05-28 03:04:56

【问题描述】：

我正在尝试在网站中使用 SVG 路径进行动画来实现这一点（下图）。我看到了这个https://css-tricks.com/svg-line-animation-works/ 并想尝试一下。但我不确定如何创建路径和动画。请帮帮我！谢谢

【参考方案1】：

SVG 解决方案

动画使用属性<stroke-dashoffset> - 行首的缩进。在<stroke-dashoffset> 的最大值处，可见线为零。 使用<stroke-dashoffset ="0"> 的值，该行将获得最大大小。

需要准确计算线的长度，以避免动画中出现不可预知的效果。

在本例中，<line> 的长度为 53px，<polyline> 的长度为 680px。

<style>
.st0fill:none;stroke:#000000;stroke-miterlimit:10; stroke-dasharray: 680; stroke-dashoffset: 680; 
.st1fill:none;stroke:#000000;stroke-miterlimit:10; stroke-dasharray: 53; stroke-dashoffset: 53;  
 </style>
<svg version="1.1"  viewBox="0 0 614 53" >
 <polyline class="st0" points="0.5,53 0.5,20.7 613.5,20.7 613.5,53 " >
  <animate
    attributeName="stroke-dashoffset"
    from="680"
    to="0"
    dur="2s"
    fill="freeze" />
 </polyline>
<line class="st1" x1="307" y1="53" x2="307" y2="0">
    <animate
      attributeName="stroke-dashoffset"
      from="53"
      to="0"
      dur="2s"
      fill="freeze" />
</line>
 
</svg>

【讨论】：

@lel 添加了第二个解决方案是SVG。如您的示例所示，仅使用 CSS 并不总是可以解决动画任务。

【参考方案2】：

您可以使用 svg 代码制作动画。您可以在 svg 路径上使用 CSS 动画。

.st0
fill:none;
stroke:#000000;
stroke-miterlimit:10;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
-webkit-animation: draw1 4s linear forwards;
animation: draw1 4s linear forwards;

.st1
fill:none;
stroke:#000000;
stroke-miterlimit:10;
stroke-dasharray: 200;
stroke-dashoffset: 200;
-webkit-animation: draw2 3s linear 2s forwards;
animation: draw2 3s linear 2s forwards;

  
@-webkit-keyframes draw1
  to stroke-dashoffset: 0;

@keyframes draw1
  to stroke-dashoffset: 0;

@-webkit-keyframes draw2
  to stroke-dashoffset: 0;

@keyframes draw2
  to stroke-dashoffset: 0;

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 614 53" style="enable-background:new 0 0 614 53;" xml:space="preserve">
<polyline class="st0" points="0.5,53 0.5,20.7 613.5,20.7 613.5,53 "/>
<line class="st1" x1="307" y1="53" x2="307" y2="0"/>
</svg>

【讨论】：

在你的答案中不包括相关部分没有帮助。

不包括相关部分是什么意思？提问者觉得它很有帮助。

您的回答只有在阅读小提琴时才有意义。作为对未来读者的礼貌，而不是链接到外部资源，答案在这里应该是可以理解的。在您的代码示例中包含 CSS 并不费力。

@ccprog，现在好些了吗？