Question

我试图在不使用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完成后圆圈也应该旋转。

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

Svg Circle围绕其中心旋转而没有css

1 个答案: