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

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>

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

画线动画总是从路径的起点开始，但是在"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

Svg Circle rotation about its center without css

html

css

svg

svg-animate