Svg圆形围绕其中心旋转，没有css答案

【问题标题】：Svg Circle rotation about its center without cssSvg圆形围绕其中心旋转，没有css
【发布时间】：2017-09-21 05:24:04
【问题描述】：

我尝试在不使用 css 的情况下旋转 svg 圆，我的代码是：

<g id="center_circle" transform="translate(-58.909212,391.47247)">
    <path style="opacity:1;fill:transparent;fill-opacity:1;fill-rule:nonzero;stroke:#295495;stroke-width:12;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:1500;stroke-dashoffset:1500;stroke-opacity:1" d="m 466.0714,332.36218 a 91.428581,91.428581 0 0 1 -91.16568,91.42821 91.428581,91.428581 0 0 1 -91.68997,-90.90242 91.428581,91.428581 0 0 1 90.63839,-91.95097 91.428581,91.428581 0 0 1 92.21122,90.37362" id="path5403">
    <animate id="center_circle_border_anim" attributeName="stroke-dashoffset" from="1500" to="0" begin="0.5s" dur="2s" fill="freeze" repeatCount="1"></animate>
    <animate id="center_circle_anim" attributeName="fill" from="transparent" to="#fff" begin="center_circle_border_anim.end" dur="0.5s" fill="freeze" repeatCount="1"></animate>
    </path>
</g>

我的问题是让圆 dashoffset 从顶部开始，并且圆应该在 dashoffset 完成后旋转。

【问题讨论】：

标签： html css svg svg-animate

【解决方案1】：

我使用 - svg-editor Peter Collingridge 优化了你的 SVG 代码

d="m466.1 332.4a91.4 91.4 0 0 1-91.2 91.4 91.4 91.4 0 0 1-91.7-90.9 91.4 91.4 0 0 1 90.6-92 91.4 91.4 0 0 1 92.2 90.4"/>

对于stroke-dashoffset的正确动画，必须准确计算路径的长度。

为此，请使用getTotalLength ()

<script>
         function TotalLength(){
          var path = document.querySelector('#check');
        var len = Math.round(path.getTotalLength() );
        alert("Length of the path - " + len);
        };
  </script>

下面是计算路径长度的代码

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
  <input  type="button" value="Total path"  onclick="TotalLength()"/>
   
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	width="200" height="200" viewBox="130 -550 400 400" >
 
 <g id="center_circle" transform=" rotate(-90)" >
         <path id="check" fill= "none" stroke ="#295495" stroke-width ="1" 
         d="m466.1 332.4a91.4 91.4 0 0 1-91.2 91.4 91.4 91.4 0 0 1-91.7-90.9 91.4 91.4 0 0 1 90.6-92 91.4 91.4 0 0 1 92.2 90.4"/>
  </g>
		 </svg> 
   <script>
         function TotalLength(){
          var path = document.querySelector('#check');
        var len = Math.round(path.getTotalLength() );
        alert("Length of the path - " + len);
        };
  </script>

单击“总路径”按钮并获取路径的完整长度。
574px的计算值加在stroke-dashoffset和stroke-dasharray中

画线动画总是从路径的起点开始，但在“X”的正部分

要从顶部开始画线，您要么必须更改路径，使路径的起点位于顶部，要么直接转到-90 degrees - transform=" rotate(-90)"

下面是使用stroke-dashoffset的动画代码

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="130 -480 400 400" >
<g id="center_circle" transform=" rotate(-90)" >
    <path style="stroke-linecap:round;stroke:#295495;stroke-width:12;stroke-dasharray:574;stroke-dashoffset:574;" 
	 d="m466.1 332.4a91.4 91.4 0 0 1-91.2 91.4 91.4 91.4 0 0 1-91.7-90.9 91.4 91.4 0 0 1 90.6-92 91.4 91.4 0 0 1 92.2 90.4">
	
     <animate id="center_circle_border_anim" attributeName="stroke-dashoffset" from="574" to="0" begin="0.5s" dur="3s" fill="freeze" repeatCount="1"></animate>
    <animate id="center_circle_anim" attributeName="fill" from="transparent" to="#fff" begin="center_circle_border_anim.end" dur="0.5s" fill="freeze" repeatCount="1"></animate>
    </path> 
</g>  
</svg>

增减动画的一个例子是dasharray

动画一个接一个地进行：

在第一个动画之后，第二个以命令 -begin = "dash_grow.end"- 开始，改变圆的透明度。
第三个动画 - 线条的缩小以命令begin =" dash_opacity.end "
循环动画，即过渡到第一个动画之后最后一个动画的结束发生在命令 - begin =" 0.5s; dash_ungrow.end + 1s "

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="130 -500 400 400" >
 <defs>
      <pattern id="newpattern"
             x="0" y="0" width="20" height="20"
             patternUnits="userSpaceOnUse" >
               
            <g fill="#85D2FF"  fill-opacity="0.7">
             <rect x="0" y="0" width="10" height="10" />
             <rect x="10" y="10" width="10" height="10" />
            </g>
      </pattern>
              
  </defs> 
	<g id="center_circle" transform=" rotate(-90)" >
    <path style="stroke-linecap:round;stroke:#295495;stroke-width:12;stroke-dasharray:574;stroke-dashoffset:574; fill:	mediumseagreen;   " 
	 d="m466.1 332.4a91.4 91.4 0 0 1-91.2 91.4 91.4 91.4 0 0 1-91.7-90.9 91.4 91.4 0 0 1 90.6-92 91.4 91.4 0 0 1 92.2 90.4">
	
     <animate id="dash_grow" attributeName="stroke-dashoffset" from="574" to="0" begin="0.5s;dash_ungrow.end+1s" dur="3s" fill="freeze" repeatCount="1"></animate>
   
   <animate id="dash_opacity" attributeName="opacity" values="1;0.2;1" fill="freeze;" begin="dash_grow.end" dur="4.5s"  repeatCount="1"></animate> 

   <animate id="dash_ungrow" attributeName="stroke-dashoffset" from="0" to="574" begin="dash_opacity.end" dur="3s" fill="freeze" repeatCount="1"></animate>
    </path> 
</g>  
</svg>

【讨论】：