SVG路径希望它以循环方式渲染

Question

我有一条代表圆的一半的路径，我希望它以圆形方式渲染。

因为它是我尝试过的 svg 的唯一路径，但它无法工作。

 <svg version="1.1"  x="0px"
    	 y="0px" width="131.45px" height="131.451px" viewBox="0 0 131.45 131.451" enable-background="new 0 0 131.45 131.451"
    	 xml:space="preserve">
    <g id="Group_952" transform="translate(0 0)">
      
    <g id="Path_211">
            <path fill="#0088CE" d="M86.692,128.579l-6.314-20.938c17.843-5.735,29.832-22.563,29.832-41.875
                c0-23.389-17.711-42.625-40.314-43.793l1.059-21.9c33.925,1.752,60.5,30.606,60.5,65.69
                C131.452,94.733,113.463,119.974,86.692,128.579z"/>
        </g>
      <svg>

Answer 1

您的半圆是使用双路径绘制的，请参见下图

因此，您只能借助filter或mask

我建议使用从顶点到半圆绘制图形的技术，通过更改图形中线的“描边虚线阵列”。

中间的线是一个以 为圆心(70.70)，半径为 的圆50

接下来，设置stroke-width ="20"并stroke-dasharray = "157 157"得到半个圆

将半圆逆时针旋转 90 度，使其起点位于顶部

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
       width="131.45px" height="131.451px" viewBox="0 0 131.45 131.451"  >  
  		
	<circle transform="rotate(-90 70 70)" cx="70" cy="70" r="50" fill="none" stroke="#0088CE"
	   stroke-width="20" stroke-dasharray="157 157">
		  
	</circle>
</svg>

要将绘图从顶点动画化到半个圆，请更改stroke-dasharray from ="0 314" to ="157 157"

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
       width="131.45px" height="131.451px" viewBox="0 0 131.45 131.451"  >  
  		
	<circle transform="rotate(-90 70 70)" cx="70" cy="70" r="50" fill="none" stroke="#0088CE"
	   stroke-width="20" stroke-dasharray="157 157">
		  <animate
		    attributeName="stroke-dasharray"
			values="0 314;157 157"
			dur="5s"
			fill="freeze" /> 
	</circle>
</svg>

CSS动画

 .crc1 {
 fill:none;
 stroke:#0088CE;
 stroke-width:20;
 stroke-dasharray:157.07;
 animation: dash 4s ;
 }
 @keyframes dash {
 0% {stroke-dasharray:  0 314}
 100% {stroke-dasharray: 157 157}
 }

<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
       width="131.45px" height="131.451px" viewBox="0 0 131.45 131.451" >  
  		
	<circle class="crc1" transform="rotate(-90 70 70)" cx="70" cy="70" r="50"> </circle>
	
</svg>

半圆旋转动画

stroke-dashoffset对于动画，使用属性的更改：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
       width="131.45px" height="131.451px" viewBox="0 0 131.45 131.451"  >  
  		<circle cx="70" cy="70" r="50" fill="none" stroke="#EDEDED"
	   stroke-width="20" /> 
	   
	<circle transform="rotate(-90 70 70)" cx="70" cy="70" r="50" fill="none" stroke="#0088CE"
	   stroke-width="20" stroke-dasharray="157.07" stroke-dashoffset="-314">
	   <animate
	    attributeName="stroke-dashoffset"
		values="0;-314"
		dur="2s"
		repeatCount="indefinite" /> 
		  
	</circle>
</svg>

复杂的绘图和旋转动画

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
       width="131.45px" height="131.451px" viewBox="0 0 131.45 131.451"  >  
  		<circle cx="70" cy="70" r="50" fill="none" stroke="#EDEDED"
	   stroke-width="20" /> 
	   
	<circle transform="rotate(-90 70 70)" cx="70" cy="70" r="50" fill="none" stroke="#0088CE"
	   stroke-width="20" stroke-dasharray="157.07" stroke-dashoffset="-314">
	 <animate id="an_dasharray"
		    attributeName="stroke-dasharray"
			values="0 314;157 157"
			begin="0s;an_dashoffset.end+0.5s"
			dur="2s"
			fill="freeze" /> 	
	 <animate id="an_dashoffset"
	    attributeName="stroke-dashoffset"
		values="0;-314"
		begin="an_dasharray.end"
		dur="2s"
		repeatCount="2" /> 
		   
	</circle>
</svg>