Question

我完全不熟悉使用CSS制作SVG（从我一直在阅读，也可能需要JS获取总路径长度）并且需要达到以下效果：http://gph.is/2iZZ3Hw

...
"interests": {
    "books_interest_id": true,
    "software_interest_id": true
},
...

Answer 1

SVG动画

func azure functionapp publish MyApp --publish-settings-only

使用JS
确定对象的长度
<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" width="30%" height="30%" viewBox="0 0 47.4 47.7" style="enable-background:new 0 0 47.4 47.7;" xml:space="preserve"> <style type="text/css"> .st0{fill-rule:evenodd;clip-rule:evenodd;fill:none;stroke:#FEC558;stroke-width:0.5;stroke-miterlimit:22.9256;} .st1{fill:#FFC656;} </style> <defs> <linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%" > <stop offset="0%" stop-color="#33363D"/> <stop offset="100%" stop-color="#5B5D5A"/> </lineargradient> </defs> <rect width="100%" height="100%" fill="url(#grad)"/> <path id="circle" class="st0" stroke-dashoffset="138" stroke-dasharray="138" d="M23.7,45.8c12.1,0,22-9.9,22-22c0-12.1-9.9-22-22-22c-12.1,0-22,9.9-22,22C1.7,35.9,11.6,45.8,23.7,45.8z"> <animate id="an_circle" attributeName="stroke-dashoffset" values="138;0" dur="2s" fill="freeze" /> </path> <g stroke-width="0.5"> <path id="trap" class="st1" stroke-dashoffset="60" stroke-dasharray="60" style="fill:none; stroke:#FEC558;" d="M14.1,17.9 14.1,20.2 14.1,22.2 14.1,23.4 14.1,24.7 14.1,27.6 32.7,35.2 32.7,32.5 32.7,30.7 32.7,29.7 32.7,28.5 32.7,25.2z"> <animate id="an_trap" attributeName="stroke-dashoffset" values="60;0" dur="1s" fill="freeze" /> <animate id="fill_trap" attributeName="fill" values="#33363D;#FEC558" begin="an_circle.end" dur="1s" fill="freeze" /> </path> <path id="triangle" class="st1" stroke-dashoffset="35" stroke-dasharray="35" style="fill:none; stroke:#FEC558;" d="M19.2,18.7 24.3,20.6 27.5,21.9 27.5,21.2 27.5,19.4 27.5,17.5 27.5,16.3 27.5,15.2 27.5,12.5 15.5,17.2 19.2,18.7"> <animate id="an_triangle" attributeName="stroke-dashoffset" begin="an_trap.end" values="35;0" dur="1s" fill="freeze" /> <animate id="fill_triangle" attributeName="fill" values="#33363D;#FEC558" begin="fill_trap.end-0.5s" dur="1s" fill="freeze" /> </path> </g> </svg>

路径长度：

代表圈圈 - <script> function TotalLength(){ var path = document.querySelector('#circle'); var len = Math.round(path.getTotalLength() ); alert("path length - " + len); }; </script>

for trapezium - 138px

表示三角形 - 60px
绘制对象动画的命令

35px

<animate id="an_circle" attributeName="stroke-dashoffset" values="138;0" dur="2s" fill="freeze" />

<animate id="an_trap" attributeName="stroke-dashoffset" values="60;0" dur="1s" fill="freeze" />

绘制三角形的动画将在动画时开始画一个梯形

<animate id="an_triangle" attributeName="stroke-dashoffset" begin="an_trap.end" values="35;0" dur="1s" fill="freeze" />
动画填充色梯形将在动画开始时开始完成画圆圈

begin="an_trap.end"
三角形的颜色填充动画将在填充梯形的动画结束

<animate id="fill_trap" attributeName="fill" values="#33363D;#FEC558" begin="an_circle.end" dur="1s" fill="freeze" />

Answer 2

CSS解决方案

使用CSS实现绘制形状轮廓的动画规则：

圈子的

.circle {
    fill:none;
    stroke:#FEC558;
    stroke-dashoffset:138.5;
    stroke-dasharray:138.5;
    animation: circle_stroke 2s ease-in forwards;
        } 

    @keyframes circle_stroke {
    0% {
    stroke-dashoffset: 138.5;
    }
    100% {
    stroke-dashoffset: 0;
      }
    }

为梯形轮廓绘制动画并用颜色填充

下面的代码

.trap {
    stroke-dashoffset:60;
    stroke-dasharray:60;
        animation:trap_stroke 2s ease-in-out forwards,  trap_fill  ease-in 3s forwards;

    }

    @keyframes trap_stroke {
    0% {
    stroke-dashoffset: 60.5;
    }

      100% {
    stroke-dashoffset: 0;
      }
    }  

    @keyframes trap_fill {
    0% {
    fill: none;
    }

      100% {
    fill: #FEC558;
      }
    }

完整动画代码

＆＃13;

 .trap, .triangle {
   stroke:#FEC558;
   stroke-width:0.5;
	fill:none;
   }
	
	.circle {
	fill:none;
	stroke:#FEC558;
	stroke-dashoffset:138.5;
	stroke-dasharray:138.5;
	animation: circle_stroke 2s ease-in forwards;
		} 
	
	@keyframes circle_stroke {
	0% {
   	stroke-dashoffset: 138.5;
	}
	100% {
   	stroke-dashoffset: 0;
	  }
	}
	

	
	
	.trap {
	stroke-dashoffset:60;
	stroke-dasharray:60;
		animation:trap_stroke 2s ease-in-out forwards,  trap_fill  ease-in 3s forwards;
	
	}
	
	@keyframes trap_stroke {
	0% {
   	stroke-dashoffset: 60.5;
	}
		  
	  100% {
   	stroke-dashoffset: 0;
	  }
	}  
	
	@keyframes trap_fill {
	0% {
   	fill: none;
	}
		  
	  100% {
   	fill: #FEC558;
	  }
	}  


	.triangle {
	stroke-dashoffset:35.5;
	stroke-dasharray:35.5;
	
	animation: triangle_stroke 1s ease-in-out forwards, triangle_fill 3.5s ease-in forwards;
	}  
	
	@keyframes triangle_stroke {
	0% {
   	stroke-dashoffset: 35.5;
	}
	100% {
   	stroke-dashoffset: 0;
	  }
	}  
	
	@keyframes triangle_fill {
	0% {
   	fill: none;
	}
	100% {
   	fill: #FEC558;;
	  }
	}

＆＃13;

<?xml version="1.0" encoding="utf-8"?>
<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"
width="30%" height="30%" viewBox="0 0 47.4 47.7" style="enable-background:new 0 0 47.4 47.7;" xml:space="preserve">  

<defs>
<linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%" >
         
            <stop offset="0%" stop-color="#33363D"/>
            <stop offset="100%" stop-color="#5B5D5A"/>
</lineargradient>
</defs> 
<rect width="100%" height="100%" fill="url(#grad)"/>

<path class="circle" d="M23.7,45.8c12.1,0,22-9.9,22-22c0-12.1-9.9-22-22-22c-12.1,0-22,9.9-22,22C1.7,35.9,11.6,45.8,23.7,45.8z"/>

    
       <path class="trap"    d="M14.1,17.9 14.1,20.2 14.1,22.2 14.1,23.4 14.1,24.7 14.1,27.6 32.7,35.2 32.7,32.5 32.7,30.7  32.7,29.7 32.7,28.5 32.7,25.2z" />
       	  
        <path class="triangle"   d="M19.2,18.7 24.3,20.6 27.5,21.9 27.5,21.2 27.5,19.4 27.5,17.5 27.5,16.3 27.5,15.2 27.5,12.5 15.5,17.2 19.2,18.7"/>
	

</svg>

＆＃13;

DEMO

UPD

适用于除IE之外的所有现代浏览器

＆＃34; IE10 and IE11 do not support CSS keyframe blocks inside media queries＆＃34;

（参见＆＃34;已知问题＆＃34;）

使用CSS动画SVG：首先是笔画，然后是填充

2 个答案:

SVG动画

CSS解决方案