javascript - SVG 成功消息动画

Question

当我成功插入时，我会向用户显示一条成功消息，其中包含一个 svg 成功图标，如图所示。
我想先显示绿色圆圈而不是动画 OK 标记以及如何使用 Java Script 来实现 future 的 SVG 动画。
这是html:

#svgcont {
  width: 400px;
  height: 430px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

<div>
  <div id="svgcont">
    <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
           <circle style="fill:#25AE88;" cx="25" cy="25" r="25"/>
           <polyline style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" points="
              38,15 22,33 12,25 "/>
        </svg>
    <p>The success message</p>
  </div>
</div>

Answer 1

纯svg解决方案

绿色圆圈外观的动画
单击 svg Canvas

后开始

<animate id="an_op"
    attributeName="opacity"
    begin="Capa_1.click"
    dur="0.5s"
    from="0" to="1"
    fill="freeze"
    restart="whenNotActive" />

复选标记绘图动画

对于画线使用属性更改stroke-dasharray from="0, 37" to="37, 0"在哪里 37是总行长

<animate id="check"
  attributeName="stroke-dasharray"
  begin="an_op.end-0.5s"
  dur="1.5s"
  from="0,37" to="37,0"
  fill="freeze"
  restart="whenNotActive" /> 

下面是完整的代码

#svgcont {
  width: 400px;
  height: 430px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  
}
</style>

<div>
  <div id="svgcont">
    <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;border:1px solid" xml:space="preserve">
           <circle style="fill:#25AE88; opacity:0" cx="25" cy="25" r="25">
        <!-- Animation of the appearance of a green circle           -->
            <animate id="an_op"
               attributeName="opacity"
               begin="Capa_1.click"
               dur="0.5s"
               from="0" to="1"
               fill="freeze"
               restart="whenNotActive" />
            </circle>
           <polyline style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-dasharray:0,37;  stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" points="
              38,15 22,33 12,25 ">
            <!-- Check mark drawing animation -->
            <animate id="check"
               attributeName="stroke-dasharray"
               begin="an_op.end-0.5s"
               dur="3s"
               from="0,37" to="37,0"
               fill="freeze"
               restart="whenNotActive" /> 
            </polyline>  
        </svg>
    <p>The success message</p>
  </div>
</div>

JS解决方案
添加动画开始按钮

 <button onclick="RestartAnimate()">Success</button>   

设置值 begin="indefinite"

 var animation = document.getElementById("an_op")
    function RestartAnimate() {
        animation.beginElement();
}

#svgcont {
  width: 400px;
  height: 430px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

<div>
  <div id="svgcont"> 
  <button onclick="RestartAnimate()">Success</button>
    <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;border:1px solid" xml:space="preserve">
           <circle style="fill:#25AE88; opacity:0" cx="25" cy="25" r="25">
        <!-- Animation of the appearance of a green circle           -->
            <animate id="an_op"
               attributeName="opacity"
               begin="indefinite"
               dur="0.5s"
               from="0" to="1"
               fill="freeze"
               restart="whenNotActive" />
            </circle>
           <polyline style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-dasharray:0,37;  stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" points="
              38,15 22,33 12,25 ">
            <!-- Check mark drawing animation -->
            <animate id="check"
               attributeName="stroke-dasharray"
               begin="an_op.end-0.25s"
               dur="1.5s"
               from="0,37" to="37,0"
               fill="freeze"
               restart="whenNotActive" /> 
            </polyline>  
        </svg>
    <p>The success message</p>
  </div>
</div>