SVG路径希望它以圆形方式呈现

Question

I have a path which represent half of the circle, I want it to render in a circular way.

as it is only path I tried of svg but it couldn't work.

  <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

Your semicircle is drawn using a double path see image below

Therefore, you can animate figure drawing only with the help of filter or mask

I suggest using the technique of drawing a figure from the top point to a semicircle, by changing the 'stroke-dasharray' of the middle line of the figure.

The middle line turned out - a circle with the center of (70.70) and a radius of 50

Next, set stroke-width ="20" and stroke-dasharray = "157 157" to get half the circle

Turn the semicircle counterclockwise 90 degrees so that its beginning is at the top

 <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> 

To animate the drawing from the top point to half the circle, change the 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 animation

  .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> 

Semicircle rotation animation

For animation the change of attribute stroke-dashoffset is used:

 <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> 

Complex animation of drawing and rotation

 <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>