SVG绘图 - 动画后形状消失[重复]

Posted 2023-03-06

【中文标题】SVG绘图 - 动画后形状消失[重复]

【英文标题】：SVG drawing - shape vanishing after animation [duplicate]

【发布时间】：2017-09-25 07:15:57

【问题描述】：

我有一个动画/绘制的形状很好，当动画完成后，形状会在页面上保留几秒钟然后消失。

第一次尝试 CSS 动画，所以不完全理解为什么它会从页面上消失，我知道这可能很明显，但任何帮助指针都将不胜感激。

body 
  background-color: #fff;


svg 
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 600px;
  height: 600px;


.path 
  stroke-dashoffset: 1600;
  stroke-dasharray: 1600;
  -webkit-animation: draw 5s linear;
  -moz-animation: draw 5s linear;
  animation: draw 5s linear;
  fill-opacity: 0;
  -webkit-animation-delay: 1.2s;  /* Safari and Chrome */
  animation-delay: 1.2s;


.path-first-o 
  stroke-dashoffset: 1600;
  stroke-dasharray: 1600;
  -webkit-animation: draw 5s linear forwards;
  -moz-animation: draw 5s linear forwards;
  animation: draw 5s linear forwards;
  fill-opacity: 0;


@-webkit-keyframes draw 
  30% 
    stroke-dashoffset: 0;
    fill-opacity: 0;
  
  50% 
    fill-opacity: 1;
  
  100% 
    stroke-dashoffset: 1;
    fill-opacity: 1;
  


@-moz-keyframes draw 
  30% 
    stroke-dashoffset: 0;
    fill-opacity: 0;
  
  50% 
    fill-opacity: 1;
  
  100% 
    stroke-dashoffset: 1;
    fill-opacity: 1;
  


@keyframes draw 
  30% 
    stroke-dashoffset: 0;
    fill-opacity: 0;
  
  50% 
    fill-opacity: 1;
  
  100% 
    stroke-dashoffset: 1;
    fill-opacity: 1;
  

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"   viewBox="0 0 744.09448819 1052.3622047" preserveAspectRatio="xMidYMid meet" enable-background="new 0 0 1136 640" xml:space="preserve">
    
<g id="layer_1">
    	<g>
         <path class="path-first-o"
          fill="#027eb4" stroke="#027eb4"
          d="M 247.28799,295.10581 29.551064,512.84273 247.28799,730.57965 l 0,-72.57898 L 102.13004,512.84273 247.28799,367.68478 Z"/>
    
    <path class="path-first-o"
       fill="#027eb4" stroke="#027eb4"
       d="m 475.56912,295.10581 217.73694,217.73692 -217.73694,217.73692 0,-72.57898 L 620.72709,512.84273 475.56912,367.68478 Z" />
    <path
       class="path-first-o"
       fill="#027eb4" stroke="#027eb4"
       d="m 247.28799,599.93749 72.57897,0 159.67374,-174.18954 -72.57897,0 z" />
  </g>
	
	</g>
</svg>

在此处查看CodePen

【参考方案1】：

您只是缺少动画属性的forwards 关键字。它是 animation-fill-mode 属性的 a 值（请参阅 mdn）。 该值保留动画的最后一帧。

您也可以像这样在animation shorthand 中使用它：

body 
  background-color: #fff;


svg 
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 600px;
  height: 600px;

.path 
  stroke-dashoffset: 1600;
  stroke-dasharray: 1600;
  -webkit-animation: draw 5s linear;
  -moz-animation: draw 5s linear;
  animation: draw 5s linear;
  fill-opacity: 0;
  -webkit-animation-delay: 1.2s;
  /* Safari and Chrome */
  animation-delay: 1.2s;


.path-first-o 
  stroke-dashoffset: 1600;
  stroke-dasharray: 1600;
  -webkit-animation: draw 5s linear forwards;
  -moz-animation: draw 5s linear forwards;
  animation: draw 5s linear forwards;
  fill-opacity: 0;


@-webkit-keyframes draw 
  30% 
    stroke-dashoffset: 0;
    fill-opacity: 0;
  
  50% 
    fill-opacity: 1;
  
  100% 
    stroke-dashoffset: 1;
    fill-opacity: 1;
  


@-moz-keyframes draw 
  30% 
    stroke-dashoffset: 0;
    fill-opacity: 0;
  
  50% 
    fill-opacity: 1;
  
  100% 
    stroke-dashoffset: 1;
    fill-opacity: 1;
  


@keyframes draw 
  30% 
    stroke-dashoffset: 0;
    fill-opacity: 0;
  
  50% 
    fill-opacity: 1;
  
  100% 
    stroke-dashoffset: 1;
    fill-opacity: 1;
  

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"   viewBox="0 0 744.09448819 1052.3622047" preserveAspectRatio="xMidYMid meet" enable-background="new 0 0 1136 640" xml:space="preserve">
  <g id="layer_1">
    <g>
      <path class="path-first-o"
        fill="#027eb4" stroke="#027eb4"
        d="M 247.28799,295.10581 29.551064,512.84273 247.28799,730.57965 l 0,-72.57898 L 102.13004,512.84273 247.28799,367.68478 Z"/>
      <path class="path-first-o"
        fill="#027eb4" stroke="#027eb4"
        d="m 475.56912,295.10581 217.73694,217.73692 -217.73694,217.73692 0,-72.57898 L 620.72709,512.84273 475.56912,367.68478 Z" />
      <path
        class="path-first-o"
        fill="#027eb4" stroke="#027eb4"
        d="m 247.28799,599.93749 72.57897,0 159.67374,-174.18954 -72.57897,0 z" />
    </g>
	</g>
</svg>

【讨论】：

谢谢，将再次阅读文档！