如何使用 SVG 动画为stroke-dashoffset 设置动画？

Question

To animate stroke-dashoffset I am aware of using CSS @keyframes to move the stroke-dashoffset of a SVG path.要为stroke-dashoffset设置动画，我知道使用CSS @keyframes来移动SVG 路径的stroke-dashoffset 。 However, because I want to size the SVG with background-size: cover , I am unable to target the individual elements inside the SVG since it's being referenced as a background-image in CSS.但是，因为我想用background-size: cover来调整 SVG background-size: cover ，所以我无法定位 SVG 中的各个元素，因为它在 CSS 中被引用为background-image 。

Is there a way to use SVG's built-in <animate /> tags to animate stroke-dashoffset ?有没有办法使用 SVG 的内置<animate />标签来为stroke-dashoffset设置动画？

Answer 1

Lion head animation example狮子头动画示例

Animation of drawing lines from zero to maximum value is implemented by changing the stroke-dashoffset from maximum to zero.绘制线条从零到最大值的动画是通过将stroke-dashoffset从最大值更改为0 来实现的。

 attributeName="stroke-dashoffset"
         begin="0.1s;f1.end+0.4s"
         values="2037;0;2037"
         dur="15s"
         calcMode="linear"
     />

A second animation has been added - filling with a color that starts after the animation of drawing lines is completed.添加了第二个动画 - 填充绘制线条动画完成后开始的颜色。

 <animate id="f1"
       attributeName="fill"
       begin="p1.end+0.4s"
       dur="10s"
       values="#FCFCFC;#A9A9A9;black;#A9A9A9;#FCFCFC" 
  />

Drawing and erasing lines is accomplished using the attribute: values="2037;0;2037"绘制和擦除线条是使用属性完成的： values="2037;0;2037"

 .txt { font-size:1.2em; color:gray; } h1 { text-align: center; } .lion { padding:0.25em; margin-left:-1.5em; float:left; }

 <body> <h1>Lion</h1> <div class="lion"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" viewBox="-30 85 600 600" style="border:0px dotted red;"> <title>The animation is drawing lines</title> <g transform="scale(0.85) "> <path class="path" fill="none" stroke-width="2" stroke ="black" stroke-dasharray= "2000" stroke-dashoffset="2000" d="m272.2 113.6c-0.3 0-0.6 0-0.9 0.1-0.7 0.1 2.2 2.5 10.9 11.2 9.8 9.7 18.2 19.1 23 25.5 5.9 8.1 12.3 18.6 16.4 29.1 0.8 1.6 3.6 11.9 4.6 16.9 0.5 2.8 1 5.4 1.2 5.8 0.8 2.5 3.9-8.4 4.8-13 1.2-5.6 1.2-11.4 1-17.1-0.2-5.8-0.5-11.8-2.2-17.4-1.4-4.8-3.6-9.4-6.7-13.3-6.6-8.2-15.1-15.1-24.4-20.1-6.4-3.5-13.8-4.9-20.9-6.5-2.2-0.5-4.8-1.3-6.9-1.2zm194.7 0c-2.1 0-4.7 0.7-6.9 1.2-7.1 1.6-14.5 3.1-20.9 6.5-9.3 5-17.8 11.8-24.4 20.1-3.1 3.9-5.3 8.6-6.7 13.3-1.7 5.6-2 11.5-2.2 17.4-0.2 5.7-0.1 11.5 1 17.1 1 4.5 4 15.4 4.8 13 0.1-0.3 0.6-2.9 1.2-5.8 0.9-5 3.7-15.3 4.6-16.9 4.2-10.5 10.5-21 16.5-29.1 4.8-6.5 13.2-15.8 23-25.5 8.7-8.7 11.6-11.1 10.9-11.2-0.3 0-0.6-0.1-0.9-0.1zm-97.3 24.5c-0.8-0.1-1.4 5.7-2 8.5-0.9 4.3-1.3 8.7-2.4 12.9-1.8 6.9-4.3 13.7-7.1 20.3-2.4 5.7-6.4 13.4-8.3 16.5-5.5 8.8-9 13.7-13.9 19.6-6.1 7.3-7.4 8.8-13 14.4-10.8 10.8-19.3 15.7-30 22.1-7.3 4.4-15.3 7.6-23.1 11-17.5 7.6-36.3 14.2-55.9 20.5-12.8 4.3-26.1 7.4-38.3 13.1-18.2 8.6-36.3 18.5-51.6 31.6-11.5 9.9-21.1 22.1-29.5 34.7-5.1 7.7-9 15.2-12.6 24.7-3 6.3-4.8 12.7-6.7 19.3-1.5 5.2-3 9.8-3.6 15.7-0.3 1.9-0.8 4.5-1.1 5.7-0.9 3.4-1.3 7.6-0.7 9 0.3 1.3 1.9 1.5 2.4 0 0.5-1.4 0.7-1.8 1.5-3.1 1.8-2.9 4.4-7 6.9-10.3 9.6-12.2 19.7-24.2 31.5-34.2 14.4-12.3 30.6-22.3 47.2-31.4 18.1-10 36.9-17 56.7-25.4 7.8-3.4 14.4-5.6 23.2-10.3 2.6-1.8 3.7-1.2 2.7 1.4-0.4 0.9-0.7 2.7-0.8 4-0.2 3 0.6 3.7 2.9 2.8 1.8-0.7 2.7-1 7.8-2.6 2.2-0.7 4.1-1.5 4.3-1.9 0.3-0.7-3.8-5-7.9-8.4-2.3-1.9-4.7-4.8-4.3-5.2 0.1-0.1 2 0 3.1 0.1 2.4 0.3 2.9 0.3 10.1 0.5 11.4 0.4 11.6 0.6 10-3.5-1.3-3.3-2.6-6.3-3.9-9.7-0.7-1.3-1.1-2.5-0.9-2.7 0.2-0.2 3.6-0.5 7.9-0.5 4.2 0 8.8-0.2 10.2-0.4l2.5-0.4c1-1-0.1-4.6-0.4-6.9-0.2-1.7-0.8-3.8-1-5.2s-0.4-3.3-0.5-4.2c-0.2-1 0-1.7 0.4-1.9 0.5-0.2 1.4-0.1 2.7 0.5 1.1 0.5 3.2 1.3 4.7 1.9 1.5 0.5 3.8 1.4 5 1.9 2.7 1 4.1 1.1 4.6 0.3 0.5-0.7 1.5-3.4 1.9-5.1 1.4-5.1 11-19.2 13.7-20.1 0.8-0.2 3.4 1.4 4.6 2.4 0.4 0.4 7.6 6 9.2 7.1 1.5 0.9 2.6 0.8 3-0.5 0.1-0.4 0.6-1.6 1.1-2.6 1.8-3.9 3.7-7.2 6.6-14 0.6-2.6 1.5-1.9 5.2 4.1 5.3 8.4 12.5 15.8 21.2 21.6 3.3 2.2 2.6 1.8 4.3 2.7 1.7-0.9 1-0.5 4.3-2.7 8.7-5.8 16-13.2 21.2-21.6 3.8-6 4.7-6.7 5.2-4.1 2.9 6.7 4.8 10.1 6.6 14 0.5 1 1 2.2 1.1 2.6 0.4 1.2 1.5 1.4 3 0.5 1.6-1 8.8-6.7 9.2-7.1 1.2-1.1 3.8-2.7 4.6-2.4 2.7 0.9 12.4 15 13.7 20.1 0.5 1.8 1.5 4.4 1.9 5.1 0.5 0.8 2 0.7 4.6-0.3 1.3-0.5 3.5-1.3 5-1.9 1.5-0.5 3.6-1.4 4.7-1.9 1.3-0.6 2.2-0.8 2.7-0.5 0.5 0.2 0.6 0.8 0.4 1.9-0.1 0.9-0.4 2.8-0.5 4.2-0.2 1.4-0.7 3.4-1 5.2-0.3 2.3-1.3 5.9-0.4 6.9l2.5 0.4c1.4 0.2 6 0.4 10.2 0.4 4.3 0 7.8 0.2 7.9 0.5 0.1 0.2-0.3 1.5-0.9 2.7-1.4 3.3-2.7 6.4-3.9 9.7-1.6 4.1-1.4 3.8 10 3.5 7.2-0.2 7.8-0.2 10.1-0.5 1.1-0.1 3-0.2 3.1-0.1 0.4 0.4-1.9 3.2-4.3 5.2-4.1 3.4-8.1 7.7-7.9 8.4 0.1 0.4 2.1 1.2 4.3 1.9 5.1 1.6 6 1.9 7.8 2.6 2.3 0.9 3.1 0.2 2.9-2.8-0.1-1.3-0.4-3.1-0.8-4-1.1-2.6 0.1-3.2 2.7-1.4 8.8 4.8 15.5 7 23.2 10.3 19.9 8.4 38.6 15.4 56.7 25.4 16.5 9.1 32.8 19.1 47.2 31.4 11.8 10.1 21.9 22.1 31.5 34.2 2.6 3.2 5.2 7.3 6.9 10.3 0.8 1.3 1 1.7 1.5 3.1 0.4 1.5 2 1.3 2.4 0 0.5-1.4 0.2-5.6-0.7-9-0.3-1.3-0.8-3.8-1.1-5.7-0.6-5.9-2.1-10.5-3.6-15.7-1.9-6.5-3.7-13-6.7-19.3-3.6-9.4-7.4-17-12.6-24.7-8.4-12.6-17.9-24.8-29.5-34.7-15.3-13.1-33.4-23-51.6-31.6-12.2-5.7-25.5-8.8-38.3-13.1-19.6-6.4-38.4-12.9-55.9-20.5-7.8-3.4-15.8-6.6-23.1-11-10.6-6.4-19.1-11.2-30-22.1-5.6-5.6-7-7.1-13-14.4-4.9-5.9-8.4-10.8-13.9-19.6-1.9-3.1-5.9-10.8-8.3-16.5-2.8-6.6-5.3-13.4-7.1-20.3-1.1-4.2-1.5-8.6-2.4-12.9-0.6-2.9-1.2-8.6-2-8.5zm-120.2 11.9c-4.1 0-8.1 0.5-12 1.5-10.1 2.7-17.7 8-27.5 15.2-2.3 1.7-3.5 3.1-2.6 3.6 0.4 0.2 8.4-1.8 13.8-2.1 10.7-0.5 21.5 1.6 31.8 4.4 10.7 2.9 20.8 7.9 30.8 12.8 5.7 2.8 10.1 5.5 16.5 9.3 4.9 2.9 4.9 1.3 1.3-4-2.1-3.2-4.2-7.2-6.7-10.6-3.9-5.3-7.7-10.7-12.6-14.9-6.9-5.9-14.7-11.6-23.5-14-3-0.8-6.1-1.2-9.3-1.2zm240.4 0c-3.2 0-6.3 0.4-9.3 1.2-8.8 2.4-16.5 8.1-23.5 14-5 4.2-8.8 9.7-12.6 14.9-2.5 3.4-4.6 7.4-6.7 10.6-3.6 5.3-3.6 6.8 1.3 4 6.5-3.8 10.9-6.5 16.5-9.3 10-4.8 20-9.9 30.8-12.8 10.3-2.8 21.1-4.9 31.8-4.4 5.4 0.3 13.5 2.3 13.8 2.1 0.9-0.6-0.3-2-2.6-3.6-9.8-7.3-17.4-12.5-27.5-15.2-3.9-1-8-1.6-12-1.5zm-263.5 27.1c-7.5 0.1-14.8 2.1-22.2 5-2.8 1.1-12 6.4-14.9 8.6-8 6.1-15.3 13.1-24.4 23.2-7.8 8.7-8.9 10.1-8.9 11.1 0 0.8 2.3 0.5 5.1-0.7 6.1-2.7 13.7-5.8 20.7-8.1 7-2.3 14-4.6 21.2-5.7 7.8-1.2 15.9-1.8 23.8-1.2 8.8 0.7 17.1 4.5 25.9 5.4 10.8 1.1 21.9 1.4 32.6-0.3 5.5-0.8 10.8-3 16-4.9 2.9-1 7.7-3.1 8.5-3.4 1.9-0.7 2.6-1.4 2.3-2.2-0.2-0.5-1.7-0.7-5.9-0.9-9.2-0.5-20.5-3.8-30.3-7.3-5.6-2-10.9-5.1-16.2-7.8-10.8-5.5-19.4-10.7-31.8-10.9-0.5 0-1 0-1.5 0zm285.2 0c-12.4 0.2-20.9 5.4-31.8 10.9-5.4 2.7-10.5 5.8-16.2 7.8-9.8 3.5-21.1 6.8-30.3 7.3-4.2 0.2-5.7 0.4-5.9 0.9-0.3 0.8 0.4 1.5 2.3 2.2 0.8 0.3 5.6 2.4 8.5 3.4 5.3 1.8 10.5 4 16 4.9 10.7 1.6 21.8 1.3 32.6 0.3 8.8-0.9 17.1-4.7 25.9-5.4 7.9-0.6 15.9 0 23.8 1.2 7.2 1.1 14.3 3.4 21.2 5.7 7.1 2.3 14.6 5.4 20.7 8.1 2.8 1.2 5.1 1.5 5.1 0.7 0-1-1.1-2.4-9-11.1-9.1-10.2-16.4-17.1-24.4-23.2-2.9-2.2-12.1-7.5-14.9-8.6-7.9-3.1-15.7-5.1-23.8-5zm-188.9 30.7c-0.8 0.1-2.8 1.5-7 4.8-5.6 4.5-10.1 7-16.2 9.1-7.9 2.7-14 4.1-21.2 5.1-8.7 1.2-17.5 1-26.3 1.1-6.8 0.1-13.6-0.1-20.3-0.2-12.3-0.2-23.9-1.1-37-0.8-8.6 0.5-17.3 0.9-25.6 3-8.1 2-16.1 4.9-23.3 9.2-5.5 3.3-10.3 7.8-14.8 12.5-4.3 4.5-8 9.5-11.2 14.7-3.1 5-5.8 10.4-8 15.9-2.4 5.7-4.1 11.7-5.7 17.7-0.5 1.9-0.9 4.2-1.3 5.9-0.4 1.7-1.2 4.3-1 4.8 0.3 0.9 1.7 0.6 3.3-0.4 0.8-0.5 9.5-6.3 14.4-9.2 8.9-5.1 18.1-9.7 27.4-13.9 6.5-2.9 13.1-5.5 19.9-7.8 14.5-4.9 29.3-9 44.2-12.5 7.8-1.9 15.9-2.6 23.7-4.6 11.4-2.9 22.9-5.7 33.6-10.5 11.7-5.3 22.9-11.9 33.1-19.8 4.1-3.2 8.7-7.9 11-10.9 4.9-6.2 6.3-7.9 7.6-9.7 0.8-1.1 1.5-2.4 1.5-2.7 0-0.5-0.1-0.7-0.5-0.7zm94.1 0c-0.4 0-0.5 0.2-0.5 0.7 0 0.4 0.7 1.6 1.5 2.7 1.3 1.8 2.6 3.5 7.6 9.7 2.3 2.9 6.9 7.7 11 10.9 10.2 7.9 21.3 14.6 33.1 19.8 10.7 4.8 22.2 7.6 33.6 10.5 7.8 2 15.9 2.7 23.7 4.6 14.9 3.6 29.7 7.6 44.2 12.5 6.7 2.3 13.4 4.9 19.9 7.8 9.4 4.2 18.5 8.8 27.4 13.9 4.9 2.8 13.6 8.6 14.4 9.2 1.5 1 3 1.3 3.3 0.4 0.1-0.5-0.6-3.1-1-4.8-0.4-1.7-0.8-4-1.3-5.9-1.6-6-3.4-11.9-5.7-17.6-2.3-5.5-4.9-10.8-8-15.9-3.3-5.2-7-10.2-11.3-14.7-4.4-4.7-9.2-9.2-14.8-12.5-7.2-4.3-15.2-7.2-23.3-9.2-8.3-2.1-17-2.5-25.6-3-13.1-0.2-24.7 0.6-37 0.8-6.8 0.1-13.6 0.3-20.3 0.2-8.8-0.1-17.6 0.1-26.3-1.1-7.2-1-13.4-2.4-21.2-5.1-6.1-2.1-10.6-4.6-16.2-9.1-4.2-3.3-6.2-4.8-7-4.8zm-124.5 123.7-5.4 3.6c-3 2-7.9 5.1-10.9 6.8-10.8 6.3-11.8 7-12.2 7.6-0.5 1 1.2 2.9 3.7 4l2.1 0.9 3.7-1.5c2-0.8 4.4-1.5 5.2-1.5 1.4 0 1.6 0.1 2.1 1.8 0.3 1 0.7 2.6 0.9 3.6 0.4 2.4 2.2 3.9 7.3 6.4 6.8 3.3 9.6 4 16.7 4.2 8.9 0.3 8.2-0.1 8.2 4.4 0 2.1-0.3 4.8-0.7 6-0.8 2.6-0.9 4.3-0.3 4.3 0.6 0 4.5-1.7 6.1-2.6 2.6-1.5 2.7-1 2.5 7.5-0.3 11.5-1.5 17.1-8 37.1-2.1 6.7-4.2 13.1-4.6 14.3-0.4 1.2-0.6 2.5-0.4 2.9 0.1 0.4 0.4 0.7 0.6 0.7 1.2 0 13.5-30.8 17.4-43.4 1.9-6.2 3.8-17.7 3.8-23.4 0-1.1 0.3-2.2 0.7-2.7 0.6-0.7 0.7-1.1 0.2-2.8-0.3-1.1-0.8-4.9-1.2-8.4-0.8-7.8-2-11.6-4.3-14-2.2-2.3-7.3-4.4-13-5.3-4.9-0.8-6.3-1.5-6.3-3.5 0-0.6-0.3-1.3-0.6-1.6-0.7-0.6-1.5-0.1-6.8 4.7-3.6 3.2-5 3.7-5.3 1.8-0.1-0.8 0.6-1.4 3.1-3.2 3.2-2.1 4.6-3.5 4.6-4.6 0-0.3-2-1.4-4.5-2.5l-4.5-2zm155.6 0-4.5 2c-2.5 1.1-4.5 2.2-4.5 2.5 0 1 1.4 2.4 4.6 4.6 2.6 1.7 3.2 2.4 3.1 3.2-0.3 1.9-1.7 1.4-5.3-1.8-5.3-4.7-6-5.3-6.8-4.7-0.3 0.3-0.6 1-0.6 1.6 0 2-1.4 2.7-6.3 3.5-5.7 0.9-10.8 2.9-13 5.3-2.3 2.4-3.5 6.2-4.3 14-0.4 3.5-0.9 7.3-1.2 8.4-0.4 1.7-0.4 2.1 0.2 2.8 0.4 0.5 0.7 1.6 0.7 2.7 0 3.3 0.9 11.1 1.9 15.9 1.4 6.7 2.4 10 7.8 24.4 4.1 10.8 4.7 12.5 8.1 20 1.6 3.6 3.1 6.5 3.3 6.5 0.8 0 0.9-1.4 0.2-3.5-0.4-1.2-2.4-7.6-4.6-14.3-6.4-20-7.6-25.6-8-37.1-0.2-8.5-0.1-8.9 2.5-7.5 1.6 0.9 5.6 2.6 6.1 2.6 0.6 0 0.5-1.7-0.3-4.3-0.4-1.2-0.7-3.9-0.7-6 0-4.5-0.7-4.2 8.2-4.4 7-0.2 9.9-0.9 16.7-4.2 5.1-2.5 6.9-4.1 7.3-6.4 0.2-1 0.6-2.6 0.9-3.6 0.5-1.7 0.7-1.8 2.1-1.8 0.9 0 3.2 0.7 5.2 1.5l3.7 1.5 2.1-0.9c2.4-1.1 4.2-3 3.6-4-0.4-0.6-1.4-1.3-12.2-7.6-3-1.8-7.9-4.8-10.9-6.8l-5.4-3.6zm-220.2 8.8c-0.3 0-1.9 0.9-3.6 2.1-4.4 2.9-11.1 5.9-16.7 8.9-9.7 5.2-19.6 9.9-29.1 15.5-9.9 5.8-19.8 11.8-29.2 18.4-8.8 6.2-17.9 12.2-25.4 19.8-9.3 9.5-17.7 20.1-24 31.8-4.6 8.4-7.6 17.5-9.7 27.1-0.9 1.7-3.3 15.1-4.1 22.7-0.8 7.4-0.9 14.8-0.8 22.2 0.2 9.4 1 18.8 2.2 28.1 0.6 5.2 1.7 10.4 2.7 15.5 0.8 4.2 1.7 8.4 2.6 12.6 0.2 1.1 0.5 3 0.8 3.3 0.7 0.9 2.2 0.7 2.6-0.5 0.2-0.6 0.6-2.9 0.9-5.1 0.3-2.2 0.7-3.7 1.1-5.5 0.9-3.5 1.9-7.1 3-10.5 1.6-5 3.4-10.1 5.5-14.9 3.4-7.7 7.5-15.2 11.8-22.5 2.8-4.7 5.8-9.3 9-13.8 4.3-6 8.8-11.8 13.7-17.4 8.4-9.6 17.4-18.7 26.8-27.3 11-10.1 23.1-19 34.7-28.4 6.7-5.4 13.6-10.7 20.3-16.1 7.1-5.7 12-10.4 15.2-14.8 3.6-4.9 7-12.7 7.3-17.1 0.2-2.5 0.1-2.8-1.4-4.3-4.6-5-7.3-10.2-10.5-16.5-2.1-4.4-3-7-3.3-9-0.3-1.9-1.7-4.2-2.6-4.2zm284.3 0c-0.9 0-2.3 2.3-2.6 4.2-0.3 2-1.3 4.6-3.3 9-3.2 6.3-6 11.5-10.5 16.5-1.5 1.6-1.6 1.8-1.4 4.3 0.3 4.4 3.7 12.2 7.3 17.1 3.2 4.3 8.1 9.1 15.2 14.8 6.7 5.4 13.6 10.7 20.3 16.1 11.6 9.4 23.7 18.3 34.7 28.4 9.4 8.6 18.3 17.8 26.8 27.3 4.9 5.5 9.4 11.4 13.7 17.4 3.2 4.5 6.2 9.1 9 13.8 4.3 7.3 8.3 14.7 11.8 22.5 2.2 4.8 3.9 9.9 5.5 14.9 1.1 3.5 2.1 7 3 10.5 0.4 1.8 0.8 3.2 1.1 5.5 0.3 2.2 0.7 4.5 0.9 5.1 0.4 1.1 1.8 1.4 2.6 0.5 0.3-0.3 0.5-2.2 0.8-3.3 0.9-4.2 1.8-8.4 2.6-12.6 1-5.2 2-10.3 2.7-15.5 1.2-9.3 1.9-18.7 2.1-28.1 0.2-7.4 0-14.8-0.8-22.2-0.8-7.6-3.2-21-4.1-22.7-2.1-9.6-5.1-18.7-9.7-27.1-6.3-11.7-14.7-22.3-24-31.8-7.5-7.7-16.6-13.6-25.4-19.8-9.4-6.6-19.2-12.6-29.2-18.4-9.5-5.5-19.4-10.3-29.1-15.5-5.6-3-12.2-6-16.7-8.9-1.7-1.1-3.3-2.1-3.6-2.1zm-274.8 74.1c-0.5 0-1 0.5-2.2 1.6-1.1 1-3.2 2.9-4.8 4.1-4.4 3.5-11.7 9.5-17.5 14.3-8 6.6-16 13-23.8 19.9-8.7 7.7-17.7 15.3-25.5 23.9-4.3 4.8-8.2 10-11.7 15.5-4.4 7-8.2 14.4-11.3 22.1-3 7.6-5.2 15.4-6.7 23.4-1.5 8.1-2.3 16.4-2.3 24.7 0 11.7 1.3 23.4 3.3 34.9 1.5 8.7 3.8 17.3 6.4 25.7 3.2 10 7.1 19.8 11.4 29.4 4.5 9.9 12.2 24.6 15.1 29 3.2 5.1 5.7 9.6 8.7 14.7 0.9 2 1.9 2.2 2.5 0.6 0.2-0.6 0.4-8.6 0.5-17.6 0-9.1 0-11.7 0.4-17.5 0.6-8.1 1.7-16.2 3.2-24.3 2.2-11.9 5-23.8 8.5-35.4 2.9-9.4 6.2-18.4 10.3-27.6 3.6-8.4 10-21 13.9-27.1 3.6-5.7 7.2-12.3 11.6-17.9 4.3-6.2 9.2-12.1 14.1-17.9 1.4-1.6 10.9-12.3 14.6-16.4 4-4.4 8.1-9.4 11.9-14.1 3-3.8 3.1-3.9 2.9-6.1-0.1-1.2-0.5-2.5-1-3-1.3-1.5-1.7-3.5-2.6-5.3-2.2-4.5-3-6.5-6.8-13.6-1.7-3.1-2-3.4-3.4-3.6-1.6-0.1-4.5 0.5-10.1 4.7-5.2 3.8-10.3 8.3-15.2 12.7-4.3 3.4-12.6 11.7-18.3 18.2-6.9 8-13.1 16.7-18.9 25.6-4.8 7.3-9 15.5-13.1 24-3.9 8.8-7.5 17.8-10.5 27-2.1 6.4-3.8 13-5.2 19.7-1.3 6-2.4 11.6-3.2 18.3-0.5 4-1.1 8.2-1.2 9.3-0.1 1.1-0.4 1.9-0.6 1.9-0.6 0-0.7-6-0.4-19.4 0.3-12.6 1.1-18.5 2.7-27.6 1.1-6.2 2.8-12.3 4.8-18.3 3-8.9 6.6-17.6 10.7-26 3-6.1 6.4-11.9 10.1-17.6 5.9-8.9 12.4-17.6 19.4-25.7 7.1-8.1 19.2-19.7 22.9-22.8 4.7-4 8.5-7.2 12.9-10.6 4.1-3.2 4.7-4 4.7-5.5 0-0.7-1.3-3.7-3.5-7.9-0.3-0.6-0.9-2-1.3-3-0.4-1-1.1-2.9-1.7-4.3-0.6-1.4-1.4-3.7-1.8-5.2-0.6-2.1-1.1-2.9-2-3.4-0.4-0.3-0.8-0.4-1-0.4zm265.4 0c-0.3 0-0.6 0.1-1 0.4-0.9 0.5-1.4 1.4-2 3.4-0.4 1.5-1.2 3.9-1.8 5.2-0.6 1.4-1.3 3.3-1.7 4.3-0.4 1-0.9 2.3-1.3 3-2.1 4.2-3.5 7.2-3.5 7.9 0 1.5 0.6 2.3 4.7 5.5 4.3 3.4 8.2 6.6 12.9 10.6 3.7 3.1 15.8 14.7 22.9 22.8 7 8.1 13.5 16.7 19.4 25.7 3.7 5.6 7.1 11.5 10.1 17.6 4.1 8.4 7.7 17.2 10.7 26 2 6 3.7 12.1 4.8 18.3 1.6 9.1 2.4 15 2.7 27.6 0.3 13.4 0.2 19.4-0.4 19.4-0.2 0-0.5-0.9-0.6-1.9-0.1-1.1-0.7-5.2-1.2-9.3-0.9-6.7-1.9-12.2-3.2-18.3-1.5-6.6-3.1-13.2-5.2-19.6-3-9.2-6.6-18.2-10.5-27-4.1-8.5-8.2-16.7-13.1-24-5.9-8.8-12-17.6-18.9-25.6-5.6-6.5-14-14.8-18.3-18.2-4.8-4.3-10-8.9-15.2-12.7-5.7-4.1-8.6-4.8-10.1-4.7-1.4 0.1-1.7 0.4-3.4 3.6-3.8 7.1-4.5 9-6.8 13.6-0.9 1.7-1.3 3.8-2.6 5.3-0.4 0.5-0.8 1.8-0.9 3-0.2 2.1-0.1 2.3 2.9 6.1 3.8 4.8 7.9 9.7 11.9 14.1 3.7 4.1 13.2 14.8 14.6 16.4 4.9 5.8 9.7 11.7 14.1 17.9 4.3 5.5 8 12.2 11.6 17.9 3.9 6.1 10.3 18.8 13.9 27.1 4 9.2 7.4 18.2 10.3 27.6 3.5 11.6 6.3 23.5 8.5 35.4 1.5 8 2.6 16.1 3.2 24.3 0.5 5.8 0.4 8.4 0.4 17.5 0 9.1 0.2 17 0.5 17.7 0.6 1.6 1.6 1.4 2.5-0.6 3-5.1 5.5-9.7 8.7-14.7 2.8-4.4 10.6-19.1 15.1-29 4.3-9.6 8.2-19.4 11.4-29.4 2.7-8.4 5-17 6.4-25.7 2-11.5 3.2-23.2 3.3-34.9 0-8.3-0.7-16.6-2.3-24.7-1.5-8-3.7-15.9-6.7-23.4-3-7.7-6.9-15.1-11.3-22.1-3.4-5.5-7.4-10.7-11.7-15.5-7.8-8.7-16.8-16.2-25.5-23.9-7.7-6.8-15.8-13.3-23.8-19.9-5.8-4.8-13.1-10.9-17.5-14.3-1.5-1.2-3.7-3.1-4.8-4.1-1.2-1.2-1.7-1.6-2.2-1.6zm-183.4 42c-0.9 0-0.9 0.2-0.7 3.3 0.2 2.7 0.7 4.1 2.6 7.9 1.6 3.1 2.8 5 4 5.9 1.9 1.5 10.2 5.7 16.8 8.5 8.7 3.6 10.1 4.2 16.2 7.2 3.4 1.7 6.7 3.8 7.7 4.5 1 0.6 1.4 2 1.4 3.4l0.1 9.7 0.2 8.5c0.1 1.2 0.1 2.2-1.2 3.5 0 0-2.3 2.1-3.5 3.1-4.5 3.7-8.7 7.8-13.8 10.5-4.5 2.4-9.4 4.6-14.5 4.9-5 0.3-8.4-0.7-14.6-3.1-2.6-1-5-1.7-5.4-1.6-0.9 0.4-2.5 5.9-2.5 8.9 0 5.3 2.5 10.9 6.3 14.5 1.4 1.4 3 2.4 3.5 2.4 0.7 0 4.8-4.8 7.4-6.9 5.7-4.4 11.4-9 18.1-11.6 7.1-2.8 14.1-4.1 22.5-4 0 0 0.1 0 0.1 0 0 0 0.1 0 0.1 0 8.5-0.1 15.4 1.2 22.5 4 6.7 2.6 12.4 7.2 18.1 11.6 2.7 2.1 6.8 6.9 7.4 6.9 0.6 0 2.1-1 3.5-2.4 3.8-3.6 6.3-9.3 6.3-14.5 0-3-1.6-8.6-2.5-8.9-0.4-0.1-2.8 0.6-5.4 1.6-6.2 2.4-9.6 3.4-14.6 3.1-5.1-0.3-10-2.5-14.5-4.9-5.1-2.7-9.3-6.8-13.8-10.5-1.2-1-3.5-3.1-3.5-3.1-1.2-1.3-1.2-2.2-1.2-3.5l0.2-8.5 0.1-9.7c0-1.4 0.4-2.7 1.4-3.4 1-0.6 4.3-2.8 7.7-4.5 6.1-3 7.5-3.6 16.2-7.2 6.6-2.8 14.9-6.9 16.8-8.5 1.1-0.9 2.4-2.8 4-5.9 1.9-3.8 2.4-5.2 2.6-7.9 0.3-3.1 0.2-3.3-0.7-3.3-0.5 0-2.4 1.3-4.2 2.8-1.8 1.6-4.4 3.4-5.9 4-2.5 1.1-3.1 1.2-10.2 1.2-6.3 0-7.7 0.1-8.7 0.8-2.9 1.9-10 4.4-14.5 5.1-2.9 0.5-5.1 0.7-7.3 0.7-2.2 0-4.4-0.2-7.3-0.7-4.5-0.7-11.6-3.2-14.5-5.1-1-0.7-2.4-0.8-8.7-0.8-7.1 0-7.7-0.1-10.2-1.2-1.5-0.6-4.1-2.4-5.9-4-1.8-1.6-3.6-2.8-4.2-2.8zm-29.3 10.1c-1.7 0-1.9 1.9 0.4 5.2 3 4.3 5.2 6.3 8.3 8.8 3.3 2.6 7 5.1 11 6.4 3.3 1.1 6.9 1 10.4 1.1 2.6 0 7.7-0.4 7.9-0.7 0.6-1-1-2-2.4-2.3-3.2-0.6-10.4-2-15.2-4.2-4.7-2.1-9.5-5.3-12.8-8.6-3.3-3.2-6.1-5.8-7.7-5.8zm-7.1 3.8c-0.3 0-0.6 0.2-0.9 0.5-0.6 0.6-0.5 1.2 1.3 5.2 3.3 7.6 6.9 13.1 12.3 17.9 3.5 3.1 8 5.4 12.6 6.5 5.4 1.3 10.1 0.6 16.7-0.3 4.7-0.6 10-1.4 15.1-1.4 4.2 0 11.6 1.3 12.6 1.3 1.7 0.1 1.8 0 2-1.1 0.1-1.2-1.3-2.4-5.7-4.8-5.2-2.8-12.2-3.5-20.4-2-5.9 1-14.8 1.3-18.1 0.6-8.6-2-14.6-6.7-23.1-18.2-2.2-3-3.3-4.2-4.3-4.1zm-7.5 23.2c-0.6 0-1.5 1.1-3.1 3-1.4 1.7-4.5 5.4-7.1 8.3-8.4 9.6-18.6 21.7-25.8 34.7-5 8.6-11.2 21.1-13 26-2.5 6.8-5.6 13.4-7.6 20.8-3.6 11.4-6.9 25-8.7 37.7-2.3 16.8-2.4 34.6-2.3 50.9 0.9 9.5 1.6 19.2 3.8 28.6 3.1 13.1 6.4 25.7 13 38.3 2.2 3.5 4.9 8.1 7.9 11.7 2.3 2.8 3.7 3.7 4.4 2.6 0.3-0.4-0.4-3.6-1.4-6.7-0.9-2.8-1.1-6-1.9-8.9-0.8-3.3-1.8-12.1-2.5-22.1-0.6-9 0.5-26.1 2.4-35 1.5-7.2 2.2-15.6 4.6-23.1 4-18.1 11.4-36.3 19.2-53 4.4-9.2 10.1-19.8 15.6-29.3 6.5-10.9 14.4-23.2 22.1-34 2-2.9 4.2-5.6 5.8-8.6-3.9-2.9-7.9-5.8-11.2-8.3-4.3-3.4-8-8.1-9.9-12.5-1.1-2.5-1.6-5.1-2.9-15.3-0.5-4.1-0.8-5.9-1.6-5.9zm189.3 0c-0.8 0-1 1.8-1.6 5.9-1.3 10.2-1.8 12.8-2.9 15.3-1.9 4.4-5.6 9.1-9.9 12.5-3.3 2.6-7.3 5.5-11.1 8.3 1.6 3 3.8 5.6 5.8 8.6 7.7 10.9 15.6 23.1 22.1 34 5.6 9.6 11.3 20.1 15.6 29.3 7.8 16.8 15.2 35 19.2 53 2.4 7.4 3.1 15.9 4.6 23.1 1.9 9 3 26.1 2.4 35-0.7 10-1.7 18.8-2.5 22.1-0.8 2.9-1 6-1.9 8.9-1 3.1-1.6 6.2-1.4 6.7 0.6 1 2.1 0.2 4.4-2.6 3-3.5 5.6-8.1 7.9-11.7 6.6-12.6 10-25.2 13-38.3 2.2-9.4 2.9-19.1 3.8-28.6 0-16.3 0-34.1-2.3-50.9-1.7-12.8-5.1-26.3-8.7-37.7-2-7.4-5-14-7.6-20.8-1.8-4.9-8-17.4-13-26-7.2-13-17.4-25.1-25.8-34.7-2.5-2.9-5.7-6.6-7.1-8.3-1.6-1.9-2.5-3-3.1-3zm-63.7 16.3c-1.4 0-2 0.6-2 1.8 0 1.3 11.5 6.3 16 6.9 3.8 0.6 7.7-0.2 12.3-2.2 5.8-2.6 7.3-3.6 7.3-4.9 0-1.6-0.8-1.6-5.2-0.3-3.3 1-5 1.2-9.3 1.2-6.7 0-12-0.6-15.8-1.8-1.3-0.4-2.4-0.6-3.2-0.6zm-98.6 49.1c-0.1 0-0.2 0.1-0.3 0.2-0.2 0.2-5.2 8.6-11.2 18.7-15.5 26.2-18.7 33.9-25.4 51.9-4.1 11.1-7.6 22.7-8.9 34.4-2.1 19.2-2.1 39.1 2.1 58 3.7 16.8 6.6 27 20.2 47.5 3.4 5.1 5.4 7.4 8.7 10.7 0.3 0.3 0.7 0.6 1.2 0.6 1.5 0 1-1 0.8-2.4-1.2-9.9-1.7-34.9-1.2-57.9 0.5-22.1 2.2-45.4 5.2-67.9 1.9-13.9 4.9-27.6 8.1-41.4 1.8-6.9 5.8-21.1 9.4-32.7 1.3-4.4 1.4-4.1-3-11.9-3.5-6.1-4.8-8.1-5.7-7.9zm135.2 0c-0.9 0.1-2.3 2.2-5.5 7.9-4.4 7.8-4.3 7.5-3 11.9 3.6 11.6 7.6 25.7 9.4 32.7 3.2 13.7 6.2 27.4 8.1 41.4 3 22.5 4.7 45.8 5.2 67.9 0.5 23.1 0 48.1-1.2 57.9-0.2 1.4-0.6 2.4 0.8 2.4 0.4 0 0.9-0.3 1.2-0.6 3.3-3.3 5.3-5.6 8.7-10.7 13.6-20.5 16.5-30.7 20.2-47.5 4.2-18.9 4.2-38.8 2.1-58-1.3-11.8-4.8-23.3-8.9-34.4-6.7-18.1-9.8-25.7-25.4-51.9-5.9-10.1-11-18.4-11.2-18.7-0.2-0.2-0.3-0.2-0.5-0.2zm-109 24.6c-0.3 0-0.7 0.7-1.1 1.5-3.7 8.4-5.8 16.7-7.8 25.3-2.3 9.8-3.6 19.9-4.9 30-0.9 7.1-0.8 5.3-1.9 21.4-0.7 10.4-0.6 14.4 0.6 26 0.9 8.9 1.5 11.7 2.9 17.4 1.6 6.5 3.2 12.9 6.5 19 4.5 8.7 11.7 16.9 19.9 22.6 1.8 1.3 3.7 2.3 4.3 2.3 1.3 0 1.6-0.8 0.9-2.7-0.5-1-0.8-1.9-1.2-2.8-2.7-7.8-4.6-15.8-6.6-23.7-1.6-6.4-2.9-12.8-4.2-19.2-1.2-6.1-2.3-12.2-3.2-18.3-1-7.1-2-14.1-2.5-21.2-0.8-12.3-1.3-27.1-1.5-40.4-0.1-11.6 0-22.1 0.5-28.8 0.4-5.9 0.2-8.2-0.8-8.2zm83 0c-1 0-1.2 2.3-0.8 8.2 0.5 6.8 0.6 17.3 0.5 28.8-0.2 13.3-0.7 28.1-1.5 40.4-0.5 7.1-1.4 14.2-2.5 21.2-0.9 6.1-2 12.2-3.2 18.3-1.3 6.4-2.6 12.8-4.2 19.2-2 8-3.9 16-6.6 23.7-0.3 1-0.7 1.8-1.2 2.8-0.7 1.8-0.4 2.7 0.9 2.7 0.5 0 2.5-1 4.3-2.3 8.3-5.8 15.5-14 19.9-22.6 3.3-6.1 4.9-12.5 6.5-19 1.4-5.7 2-8.5 2.9-17.4 1.2-11.6 1.3-15.6 0.6-26-1.1-16.1-1-14.3-1.9-21.4-1.3-10-2.5-20.1-4.9-30-2-8.6-4.1-16.9-7.8-25.3-0.3-0.8-0.8-1.5-1.1-1.5zm-44.1 5.9c-13.8 0-14.7 0.1-15.2 0.9-0.7 1 0.2 15.1 0.5 22.7 0.3 8 0.9 16.1 1.4 24.1 0.6 8.7 1.2 17.3 2.2 26 0.8 7.4 1.4 14.8 3.1 22 1.5 6.7 3.8 13.2 6.3 19.6 1.2 3.1 3.3 8.3 4.3 9.1 1-0.9 3.1-6 4.3-9.1 2.5-6.4 4.8-12.9 6.3-19.6 1.7-7.2 2.3-14.6 3.1-22 1-8.6 1.5-17.3 2.2-26 0.6-8 1.1-16.1 1.4-24.1 0.3-7.6 1.2-21.7 0.5-22.7-0.5-0.8-1.4-0.8-15.2-0.9-1.3 0.1-2 0.1-2.6 0.1-0.7 0-1.3 0-2.6-0.1z"> <animate id="p1" attributeName="stroke-dashoffset" begin="0.1s;f1.end+0.4s" values="2037;0;2037" dur="15s" calcMode="linear" /> <animate id="f1" attributeName="fill" begin="p1.end+0.4s" dur="10s" values="#FCFCFC;#A9A9A9;black;#A9A9A9;#FCFCFC" /> </path> </g> </svg> </div> <div class="txt"> <p> The lion (Panthera leo) is a species in the family Felidae; it is a muscular, deep-chested cat with a short, rounded head, a reduced neck and round ears, and a hairy tuft at the end of its tail. The lion is sexually dimorphic; males are larger than females with a typical weight range of 150 to 250 kg (330 to 550 lb) for males and 120 to 182 kg (265 to 400 lb) for females. Male lions have a prominent mane, which is the most recognisable feature of the species. A lion pride consists of a few adult males, related females and cubs. Groups of female lions typically hunt together, preying mostly on large ungulates. The species is an apex and keystone predator, although they scavenge when opportunities occur. Some lions have been known to hunt humans, although the species typically does not.</p> <p>Typically, the lion inhabits grasslands and savannas but is absent in dense forests. It is usually more diurnal than other big cats, but when persecuted it adapts to being active at night and at twilight. In the Pleistocene, the lion ranged throughout Eurasia, Africa and North America but today it has been reduced to fragmented populations in Sub-Saharan Africa and one critically endangered population in western India. It has been listed as Vulnerable on the IUCN Red List since 1996 because populations in African countries have declined by about 43% since the early 1990s. Lion populations are untenable outside designated protected areas. Although the cause of the decline is not fully understood, habitat loss and conflicts with humans are the greatest causes for concern.</p> <p>One of the most widely recognised animal symbols in human culture, the lion has been extensively depicted in sculptures and paintings, on national flags, and in contemporary films and literature. Lions have been kept in menageries since the time of the Roman Empire and have been a key species sought for exhibition in zoological gardens across the world since the late 18th century. Cultural depictions of lions were prominent in the Upper Paleolithic period; carvings and paintings from the Lascaux and Chauvet Caves in France have been dated to 17,000 years ago, and depictions have occurred in virtually all ancient and medieval cultures that coincided with the lion's former and current ranges.is not fully understood, habitat loss and conflicts with humans are the greatest causes for concern. </p> wikipedia.org </div> </body>

Answer 2

I found the answer.我找到了答案。 You insert the <animate /> tag within the path.在路径中插入<animate />标签。

<path stroke-dashoffset="200" stroke-dasharray="200 30" stroke-width="2" stroke="#333" d="...">
   <animate attributeName="stroke-dashoffset" values="0 2000" dur="5s" repeatCount="indefinite" />
</path>

如何使用 SVG 动画为stroke-dashoffset 设置动画？

问题描述

2 个解决方案

解决方案1
9 已采纳 2019-04-05 15:09:19

Lion head animation example狮子头动画示例

解决方案2
2 2018-09-29 00:07:48

如何使用 SVG 动画为stroke-dashoffset 设置动画？

问题描述

2 个解决方案

解决方案1 9 已采纳 2019-04-05 15:09:19

Lion head animation example狮子头动画示例

解决方案2 2 2018-09-29 00:07:48

解决方案1
9 已采纳 2019-04-05 15:09:19

解决方案2
2 2018-09-29 00:07:48